Liquid Glass

Starting with iOS 26, Apple introduced the Liquid Glass visual effect, a new design element that creates a frosted glass appearance on sheets and modals.

TrueSheet supports Liquid Glass by default on iOS 26+, giving your sheets a modern, native look.

What is Liquid Glass?

Liquid Glass is a visual effect introduced in iOS 26 that provides a translucent, frosted glass appearance with a subtle blur. It's part of Apple's latest design language and is automatically applied to native sheet presentations.

By default, TrueSheet enables Liquid Glass on iOS 26+ devices. On supported iOS 26.1+ devices, backgroundColor or backgroundBlur replaces it with a native effect. With neither prop set, the default is Liquid Glass.

See the Backgrounds guide for colors, blur, custom backgrounds, per-detent backgrounds, and the iOS fallback behavior.

Tinting Liquid Glass

backgroundStyle paints over the glass or blur. A translucent color tints the effect and keeps the content behind the sheet visible.

<TrueSheet backgroundStyle={{ backgroundColor: 'rgba(0, 122, 255, 0.25)' }}>
  {/* Sheet content */}
</TrueSheet>

Tinted glass is not supported per detent. On iOS 26+, detents with a detentBackgrounds entry lose the glass touch response.

Disabling Liquid Glass

If you prefer the classic sheet appearance without Liquid Glass, there are two options:

Using `backgroundColor` or `backgroundBlur`

Setting backgroundColor or backgroundBlur replaces glass with that effect.

<TrueSheet backgroundColor="#ffffff">
  {/* Sheet content */}
</TrueSheet>

<TrueSheet backgroundBlur="system-material">
  {/* Sheet content */}
</TrueSheet>

Use backgroundColor="transparent" to remove the glass without adding a color. Leave backgroundBlur unset, since blur takes precedence.

<TrueSheet backgroundColor="transparent">
  {/* Sheet content */}
</TrueSheet>

This requires iOS 26.1+ with native background effect support. Devices without the setters use the fallback.

Using `UIDesignRequiresCompatibility`

On iOS 26, set UIDesignRequiresCompatibility to true in your Info.plist to disable Liquid Glass.

iOS 27 and later ignore this key. Use backgroundColor or backgroundBlur to replace Liquid Glass on individual sheets.

Using Info.plist

Add the following key to your ios/YourApp/Info.plist:

ios/YourApp/Info.plist

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
<plist version="1.0">
<dict>
  <!-- Other keys... -->
  <key>UIDesignRequiresCompatibility</key>
  <true/>
</dict>
</plist>

Using Expo Config Plugin

If you're using Expo, you can configure this through your app.json or app.config.js:

app.config.js

export default {
  expo: {
    ios: {
      infoPlist: {
        UIDesignRequiresCompatibility: true,
      },
    },
  },
}

After making this change, rebuild your app:

npx expo prebuild --clean
npx expo run:ios

On iOS 26, this setting disables Liquid Glass across the entire app. It has no effect on iOS 27+. See Apple's documentation for more details.