Skip to main content

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.

liquid-glass

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 when no backgroundColor or backgroundBlur is provided. The sheet will automatically display with the Liquid Glass effect.

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 (or both) on the sheet will disable the Liquid Glass effect for that specific sheet.

<TrueSheet backgroundColor="#ffffff">
  {/* 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.

note

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
note

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

Learn More​