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. The sheet will automatically display with the Liquid Glass effect unless glass is false or backgroundBlur is set.

Tinting Liquid Glass

backgroundColor paints over the glass, so a translucent color tints it while keeping the blur and the content behind the sheet visible.

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

Disabling Liquid Glass

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

Using `glass` or `backgroundBlur`

Set glass to false to remove the glass behind backgroundColor. Setting backgroundBlur also removes it, since the blur replaces the glass material.

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

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

This approach allows you to disable Liquid Glass on a per-sheet basis while keeping it enabled for other sheets in your app.

This only works on iOS 26.1 and above.

Using `UIDesignRequiresCompatibility`

Set UIDesignRequiresCompatibility to true in your Info.plist to disable Liquid Glass.

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

This setting disables the Liquid Glass UI across your entire app, not just for sheets. See Apple's documentation for more details.