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:
- Set
backgroundColor → disables Liquid Glass entirely, loses rim refraction
backgroundBlur="system-ultra-thin-material" → legacy UIBlurEffect path, loses the iOS 26 material
- 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.
Summary
Expose iOS 26's
UIGlassEffect.Style.clearvariant via a newglassStyleprop so apps can opt into the high-transparency Liquid Glass material for media-rich sheets.Currently on iOS 26+, when neither
backgroundColornorbackgroundBluris set, TrueSheet lets the system apply its default Liquid Glass — which isUIGlassEffectStyleRegularunder 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
UIGlassEffectships two styles:.regular.clearApple's own HIG explicitly calls out
.clearfor "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:
backgroundColor→ disables Liquid Glass entirely, loses rim refractionbackgroundBlur="system-ultra-thin-material"→ legacy UIBlurEffect path, loses the iOS 26 materialpatch-package)None of these let us keep iOS 26 Liquid Glass rim + clear variant.
Proposed API
glassStyle?: 'regular' | 'clear', default'regular'backgroundColororbackgroundBluris set (explicit precedence, matches existing behavior)Reference implementation
I've shipped this in our app via
patch-packageand it works cleanly. Happy to open a PR — here's the gist of the native change:TrueSheetViewController.mm(setupBackground):Plus:
src/fabric/TrueSheetViewNativeComponent.tsspec:glassStyle?: WithDefault<'regular' | 'clear', 'regular'>GlassStyleinsrc/TrueSheet.types.tssrc/TrueSheet.tsxTrueSheetNavigationSheetPropsPick list@propertyonTrueSheetViewController.h, wire inTrueSheetView.mmFull 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 (
glassStylevsliquidGlassStylevs something else) and whether you'd wantisInteractiveexposed too (I default it toYESinternally, matching Apple's typical usage for draggable sheets).Thanks for the library — it's doing real work for us on iOS 26.