diff --git a/ios/TrueSheetView.mm b/ios/TrueSheetView.mm index cfd1c375..c6b35bf2 100644 --- a/ios/TrueSheetView.mm +++ b/ios/TrueSheetView.mm @@ -187,6 +187,9 @@ - (void)updateProps:(Props::Shared const &)props oldProps:(Props::Shared const & // Blur tint _controller.backgroundBlur = newProps.backgroundBlur; + // Liquid Glass style (iOS 26+) + _controller.backgroundGlass = newProps.backgroundGlass; + // Blur options const auto &blurOpts = newProps.blurOptions; _controller.blurIntensity = blurOpts.intensity >= 0 ? @(blurOpts.intensity) : nil; diff --git a/ios/TrueSheetViewController.h b/ios/TrueSheetViewController.h index 056ad78b..509e13b2 100644 --- a/ios/TrueSheetViewController.h +++ b/ios/TrueSheetViewController.h @@ -65,6 +65,7 @@ NS_ASSUME_NONNULL_BEGIN @property (nonatomic, assign) BOOL dimmed; @property (nonatomic, strong, nullable) NSNumber *dimmedDetentIndex; @property (nonatomic, assign) facebook::react::TrueSheetViewBackgroundBlur backgroundBlur; +@property (nonatomic, assign) facebook::react::TrueSheetViewBackgroundGlass backgroundGlass; @property (nonatomic, strong, nullable) NSNumber *blurIntensity; @property (nonatomic, assign) BOOL blurInteraction; @property (nonatomic, assign) BOOL pageSizing; diff --git a/ios/TrueSheetViewController.mm b/ios/TrueSheetViewController.mm index 74471b93..75ca00a9 100644 --- a/ios/TrueSheetViewController.mm +++ b/ios/TrueSheetViewController.mm @@ -746,7 +746,16 @@ - (void)setupBackground { self.sheet.backgroundEffect = [UIColorEffect effectWithColor:self.backgroundColor]; } else if (hasBlur) { self.sheet.backgroundEffect = [UIColorEffect effectWithColor:[UIColor clearColor]]; + } else if (self.backgroundGlass == facebook::react::TrueSheetViewBackgroundGlass::Clear) { + // Clear glass variant (iOS 26+). Higher transparency, no luminosity + // veil. Designed for media-rich backgrounds; typically paired with + // an explicit dimming/blur layer for content legibility. + UIGlassEffect *glass = [UIGlassEffect effectWithStyle:UIGlassEffectStyleClear]; + glass.interactive = YES; + self.sheet.backgroundEffect = glass; } else { + // Default: let the system apply iOS 26's standard Liquid Glass + // (UIGlassEffectStyleRegular under the hood). self.sheet.backgroundEffect = nil; } return; diff --git a/src/TrueSheet.tsx b/src/TrueSheet.tsx index 8843824f..7b8b6f84 100644 --- a/src/TrueSheet.tsx +++ b/src/TrueSheet.tsx @@ -441,6 +441,7 @@ export class TrueSheet extends PureComponent { initialDetentAnimated = true, dimmedDetentIndex, backgroundBlur, + backgroundGlass, blurOptions, cornerRadius, maxContentHeight, @@ -487,6 +488,7 @@ export class TrueSheet extends PureComponent { style={styles.sheetView} detents={resolvedDetents} backgroundBlur={backgroundBlur} + backgroundGlass={backgroundGlass} blurOptions={blurOptions} backgroundColor={backgroundColor} cornerRadius={cornerRadius} diff --git a/src/TrueSheet.types.ts b/src/TrueSheet.types.ts index a1157d76..97df0532 100644 --- a/src/TrueSheet.types.ts +++ b/src/TrueSheet.types.ts @@ -193,6 +193,16 @@ export type InsetAdjustment = */ | 'never'; +/** + * iOS 26+ Liquid Glass style. + * + * - 'regular': Standard glass with luminosity veil for readability (default). + * - 'clear': High-transparency glass for media-rich backgrounds. + * + * @platform ios 26+ + */ +export type BackgroundGlass = 'regular' | 'clear'; + /** * Blur style mapped to native values in IOS. * @@ -371,6 +381,15 @@ export interface TrueSheetProps extends ViewProps { */ backgroundBlur?: BackgroundBlur; + /** + * iOS 26+ Liquid Glass style. Ignored when `backgroundColor` or + * `backgroundBlur` is set, or on pre-iOS 26 runtimes. + * + * @platform ios 26+ + * @default 'regular' + */ + backgroundGlass?: BackgroundGlass; + /** * Options for customizing the blur effect. * Only applies when `backgroundBlur` is set. diff --git a/src/fabric/TrueSheetViewNativeComponent.ts b/src/fabric/TrueSheetViewNativeComponent.ts index ba741939..4a3c3b5b 100644 --- a/src/fabric/TrueSheetViewNativeComponent.ts +++ b/src/fabric/TrueSheetViewNativeComponent.ts @@ -85,6 +85,10 @@ export interface NativeProps extends ViewProps { 'none' >; + // iOS 26+ Liquid Glass style. Ignored when backgroundColor or + // backgroundBlur is set, or on pre-iOS 26 runtimes. + backgroundGlass?: WithDefault<'regular' | 'clear', 'regular'>; + anchor?: WithDefault<'left' | 'center' | 'right', 'center'>; anchorOffset?: WithDefault; insetAdjustment?: WithDefault<'automatic' | 'never', 'automatic'>; diff --git a/src/navigation/types.ts b/src/navigation/types.ts index 67196e96..b2f03045 100644 --- a/src/navigation/types.ts +++ b/src/navigation/types.ts @@ -132,6 +132,7 @@ export type TrueSheetNavigationSheetProps = Pick< | 'dimmed' | 'dimmedDetentIndex' | 'backgroundBlur' + | 'backgroundGlass' | 'blurOptions' | 'maxContentHeight' | 'maxContentWidth'