Skip to content

feat(ios): expose UIGlassEffect clear variant via new glassStyle prop #663

@michelemarri

Description

@michelemarri

Summary

Expose iOS 26's UIGlassEffect.Style.clear variant via a new glassStyle prop so apps can opt into the high-transparency Liquid Glass material for media-rich sheets.

Currently on iOS 26+, when neither backgroundColor nor backgroundBlur is set, TrueSheet lets the system apply its default Liquid Glass — which is UIGlassEffectStyleRegular under the hood (material + luminosity overlay + automatic tint). That's the right default, but there's no way to opt into .clear.

Why it matters

iOS 26's UIGlassEffect ships two styles:

Style Use case Visual
.regular Default. Chrome, generic sheets, nav bars. Blur + white luminosity veil, strong legibility baseline.
.clear Media-rich backgrounds (photos, video, maps). High transparency, limited adaptivity, meant to be paired with a manual dimming/blur layer.

Apple's own HIG explicitly calls out .clear for "bold content over rich backgrounds". For apps that present a sheet over a custom animated canvas (our case: a football pitch with animated crowd / LED jumbotron, see screenshot below) the regular veil washes out the background. .clear + app-side thin blur gives an editorial result that feels native.

Right now the only workarounds are:

  1. Set backgroundColor → disables Liquid Glass entirely, loses rim refraction
  2. backgroundBlur="system-ultra-thin-material" → legacy UIBlurEffect path, loses the iOS 26 material
  3. Patch the library (what we're currently doing via patch-package)

None of these let us keep iOS 26 Liquid Glass rim + clear variant.

Proposed API

<TrueSheet
  detents={[0.6, 0.95]}
  glassStyle="clear"  // ← new, defaults to 'regular'
  cornerRadius={20}
  scrollable
>
  {/* app-side dimming + content */}
</TrueSheet>
  • New prop glassStyle?: 'regular' | 'clear', default 'regular'
  • Ignored when backgroundColor or backgroundBlur is set (explicit precedence, matches existing behavior)
  • Ignored on pre-iOS 26 runtimes (silently falls back to current path)
  • Android / web: no-op

Reference implementation

I've shipped this in our app via patch-package and it works cleanly. Happy to open a PR — here's the gist of the native change:

TrueSheetViewController.mm (setupBackground):

#if RNTS_IPHONE_OS_VERSION_AVAILABLE(26_1)
  if (@available(iOS 26.1, *)) {
    if (!self.isDesignCompatibilityMode) {
      if (self.backgroundColor) {
        self.sheet.backgroundEffect = [UIColorEffect effectWithColor:self.backgroundColor];
      } else if (hasBlur) {
        self.sheet.backgroundEffect = [UIColorEffect effectWithColor:[UIColor clearColor]];
      } else if (self.glassStyle == facebook::react::TrueSheetViewGlassStyle::Clear) {
        UIGlassEffect *glass = [UIGlassEffect effectWithStyle:UIGlassEffectStyleClear];
        glass.interactive = YES;
        self.sheet.backgroundEffect = glass;
      } else {
        self.sheet.backgroundEffect = nil; // system default = regular
      }
      return;
    }
  }
#endif

Plus:

  • New prop in src/fabric/TrueSheetViewNativeComponent.ts spec: glassStyle?: WithDefault<'regular' | 'clear', 'regular'>
  • New type GlassStyle in src/TrueSheet.types.ts
  • Forward in src/TrueSheet.tsx
  • Add to TrueSheetNavigationSheetProps Pick list
  • @property on TrueSheetViewController.h, wire in TrueSheetView.mm

Full diff: ~220 lines (patch-package file), no behavior change for existing users, purely additive.

Would a PR be welcome?

If yes, I'll send one with docs + a screenshot in the README's iOS 26 section. Let me know preferred naming (glassStyle vs liquidGlassStyle vs something else) and whether you'd want isInteractive exposed too (I default it to YES internally, matching Apple's typical usage for draggable sheets).

Thanks for the library — it's doing real work for us on iOS 26.

Metadata

Metadata

Assignees

No one assigned

    Labels

    needs reproNeed to replicate this issue

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions