@lodev09/react-native-true-sheet 4.0.0-beta.19 → 4.0.0-beta.20

package/android/src/main/java/com/lodev09/truesheet/TrueSheetView.kt

@@ -204,6 +204,7 @@ class TrueSheetView(private val reactContext: ThemedReactContext) :
     setupScrollable()
 
     if (viewController.isPresented) {
+      viewController.setupBackground()
       viewController.sheetView?.setupBackground()
       viewController.sheetView?.setupGrabber()
       viewController.sheetView?.updateGravity()
@@ -260,9 +261,12 @@ class TrueSheetView(private val reactContext: ThemedReactContext) :
     viewController.sheetCornerRadius = radius
   }
 
+  fun setDetentBackgrounds(colors: List<Int?>) {
+    viewController.detentBackgrounds = colors
+  }
+
   fun setSheetBackgroundColor(color: Int?) {
-    if (viewController.sheetBackgroundColor == color) return
-    viewController.sheetBackgroundColor = color
+    viewController.backgroundColor = color
   }
 
   fun setDismissible(dismissible: Boolean) {

package/android/src/main/java/com/lodev09/truesheet/TrueSheetViewController.kt

@@ -1,5 +1,6 @@
 package com.lodev09.truesheet
 
+import android.animation.ValueAnimator
 import android.annotation.SuppressLint
 import android.graphics.Canvas
 import android.os.Build
@@ -227,7 +228,13 @@ class TrueSheetViewController(private val reactContext: ThemedReactContext) :
   override var grabber: Boolean = true
   override var grabberOptions: GrabberOptions? = null
   override var accessibilityOptions: AccessibilityOptions? = null
+  var backgroundColor: Int? = null
+  var detentBackgrounds: List<Int?> = emptyList()
+  private var displayedBackgroundIndex = 0
+  private var backgroundAnimator: ValueAnimator? = null
+  private var targetBackgroundColor: Int? = null
   override var sheetBackgroundColor: Int? = null
+    private set
   var insetAdjustment: TrueSheetInsetAdjustment = TrueSheetInsetAdjustment.AUTOMATIC
 
   var scrollableOptions: ScrollableOptions? = null
@@ -425,6 +432,9 @@ class TrueSheetViewController(private val reactContext: ThemedReactContext) :
 
   private fun cleanupSheet() {
     cleanupKeyboardObserver()
+    backgroundAnimator?.cancel()
+    backgroundAnimator = null
+    targetBackgroundColor = null
     sheetView?.animate()?.cancel()
 
     // Cleanup dim views
@@ -846,6 +856,8 @@ class TrueSheetViewController(private val reactContext: ThemedReactContext) :
     setupDimmedBackground()
     setupKeyboardObserver()
 
+    displayedBackgroundIndex = detentIndex
+    setupBackground(animated = false)
     sheet.setupBackground()
     sheet.setupElevation()
     sheet.setupGrabber()
@@ -1099,6 +1111,30 @@ class TrueSheetViewController(private val reactContext: ThemedReactContext) :
   // MARK: - Dimmed Background
   // =============================================================================
 
+  fun setupBackground(animated: Boolean = true) {
+    val sheet = sheetView ?: return
+    val color = detentBackgrounds.getOrNull(displayedBackgroundIndex)
+      ?: backgroundColor ?: sheet.getDefaultBackgroundColor()
+    if (animated && color == targetBackgroundColor) return
+
+    backgroundAnimator?.cancel()
+    targetBackgroundColor = color
+    val startColor = sheetBackgroundColor ?: color
+    if (!animated || !isPresented || startColor == color) {
+      sheetBackgroundColor = color
+      sheet.updateBackgroundColor(color)
+      return
+    }
+    backgroundAnimator = ValueAnimator.ofArgb(startColor, color).apply {
+      duration = 200L
+      addUpdateListener {
+        sheetBackgroundColor = it.animatedValue as Int
+        sheet.updateBackgroundColor(it.animatedValue as Int)
+      }
+      start()
+    }
+  }
+
   fun setupDimmedBackground() {
     val coordinator = this.coordinatorLayout ?: run {
       RNLog.e(reactContext, "TrueSheet: coordinatorLayout is null in setupDimmedBackground")
@@ -1427,6 +1463,13 @@ class TrueSheetViewController(private val reactContext: ThemedReactContext) :
   }
 
   private fun emitChangePositionDelegate(currentTop: Int, realtime: Boolean = true) {
+    if (isPresented && !isPresentAnimating && !isBeingDismissed) {
+      val index = detentCalculator.getBackgroundIndex(currentTop, displayedBackgroundIndex)
+      if (index != displayedBackgroundIndex) {
+        displayedBackgroundIndex = index
+        setupBackground()
+      }
+    }
     // Dedupe emissions for same position
     if (currentTop == lastEmittedPositionPx) return
 

package/android/src/main/java/com/lodev09/truesheet/TrueSheetViewManager.kt

@@ -1,8 +1,10 @@
 package com.lodev09.truesheet
 
 import android.view.WindowManager
+import com.facebook.react.bridge.ColorPropConverter
 import com.facebook.react.bridge.ReadableArray
 import com.facebook.react.bridge.ReadableMap
+import com.facebook.react.bridge.ReadableType
 import com.facebook.react.module.annotations.ReactModule
 import com.facebook.react.uimanager.PixelUtil.dpToPx
 import com.facebook.react.uimanager.PointerEvents
@@ -114,6 +116,21 @@ class TrueSheetViewManager :
     view.setDetents(detents)
   }
 
+  @ReactProp(name = "detentBackgrounds")
+  override fun setDetentBackgrounds(view: TrueSheetView, value: ReadableArray?) {
+    view.setDetentBackgrounds(
+      (0 until (value?.size() ?: 0)).map { index ->
+        val entry = value?.getMap(index)
+        if (entry != null && entry.hasKey("color") && !entry.isNull("color")) {
+          val color = if (entry.getType("color") == ReadableType.Map) entry.getMap("color") else entry.getDouble("color")
+          ColorPropConverter.getColor(color, view.context)
+        } else {
+          null
+        }
+      }
+    )
+  }
+
   @ReactProp(name = "backgroundColor", customType = "Color")
   override fun setBackgroundColor(view: TrueSheetView, color: Int?) {
     view.setSheetBackgroundColor(color)
@@ -228,16 +245,6 @@ class TrueSheetViewManager :
     // iOS-specific prop - no-op on Android
   }
 
-  @ReactProp(name = "blurOptions")
-  override fun setBlurOptions(view: TrueSheetView, options: ReadableMap?) {
-    // iOS-specific prop - no-op on Android
-  }
-
-  @ReactProp(name = "glass", defaultBoolean = true)
-  override fun setGlass(view: TrueSheetView, glass: Boolean) {
-    // iOS-specific prop - no-op on Android
-  }
-
   @ReactProp(name = "insetAdjustment")
   override fun setInsetAdjustment(view: TrueSheetView, insetAdjustment: String?) {
     view.setInsetAdjustment(insetAdjustment ?: "automatic")

package/android/src/main/java/com/lodev09/truesheet/core/TrueSheetBottomSheetView.kt

@@ -179,7 +179,14 @@ class TrueSheetBottomSheetView(private val reactContext: ThemedReactContext) : F
     clipToOutline = true
   }
 
-  private fun getDefaultBackgroundColor(): Int {
+  fun updateBackgroundColor(color: Int) {
+    (background as? ShapeDrawable)?.let {
+      it.paint.color = color
+      it.invalidateSelf()
+    }
+  }
+
+  fun getDefaultBackgroundColor(): Int {
     val isNight = (
       reactContext.resources.configuration.uiMode and
         Configuration.UI_MODE_NIGHT_MASK

package/android/src/main/java/com/lodev09/truesheet/core/TrueSheetDetentCalculator.kt

@@ -137,6 +137,22 @@ class TrueSheetDetentCalculator(private val reactContext: ThemedReactContext) {
     return maxContentHeight?.let { minOf(height, it, maxAllowedHeight) } ?: minOf(height, maxAllowedHeight)
   }
 
+  fun getBackgroundIndex(sheetTop: Int, displayedIndex: Int): Int {
+    if (detents.isEmpty()) return -1
+
+    val height = getVisibleSheetHeight(sheetTop)
+    var nextIndex = displayedIndex.coerceIn(0, detents.size - 1)
+    var distance = kotlin.math.abs(height - getVisibleSheetHeight(getSheetTopForDetentIndex(nextIndex)))
+    for (index in detents.indices) {
+      val nextDistance = kotlin.math.abs(height - getVisibleSheetHeight(getSheetTopForDetentIndex(index)))
+      if (nextDistance < distance) {
+        nextIndex = index
+        distance = nextDistance
+      }
+    }
+    return nextIndex
+  }
+
   /**
    * Get the expected sheet top position for a detent index.
    */

package/ios/TrueSheetView.mm

@@ -236,16 +236,29 @@ using namespace facebook::react;
   // Background color
   _controller.backgroundColor = RCTUIColorFromSharedColor(newProps.backgroundColor);
 
+  NSMutableArray<NSDictionary *> *detentBackgrounds = [NSMutableArray new];
+  ContextContainer contextContainer;
+  PropsParserContext parserContext{-1, contextContainer};
+  for (const auto &entry : newProps.detentBackgrounds) {
+    NSMutableDictionary *background = [NSMutableDictionary new];
+    UIColor *color = RCTUIColorFromSharedColor(entry.color);
+    if (color) {
+      background[@"color"] = color;
+    }
+    if (!entry.blur.empty()) {
+      auto blur = TrueSheetViewBackgroundBlur::None;
+      fromRawValue(parserContext, RawValue(entry.blur), blur);
+      background[@"blur"] = @(static_cast<int>(blur));
+    }
+    [detentBackgrounds addObject:background];
+  }
+  if (![_controller.detentBackgrounds isEqualToArray:detentBackgrounds]) {
+    _controller.detentBackgrounds = detentBackgrounds;
+  }
+
   // Blur tint
   _controller.backgroundBlur = newProps.backgroundBlur;
 
-  // Blur options
-  const auto &blurOpts = newProps.blurOptions;
-  _controller.blurIntensity = blurOpts.intensity >= 0 ? @(blurOpts.intensity) : nil;
-  _controller.blurInteraction = blurOpts.interaction;
-
-  _controller.glass = newProps.glass;
-
   // Corner radius
   _controller.cornerRadius = newProps.cornerRadius < 0 ? nil : @(newProps.cornerRadius);
 

package/ios/TrueSheetViewController.h

@@ -55,6 +55,7 @@ NS_ASSUME_NONNULL_BEGIN
 
 @property (nonatomic, weak, nullable) id<TrueSheetViewControllerDelegate> delegate;
 @property (nonatomic, strong) NSArray<NSNumber *> *detents;
+@property (nonatomic, copy) NSArray<NSDictionary *> *detentBackgrounds;
 @property (nonatomic, strong, nullable) NSNumber *maxContentHeight;
 @property (nonatomic, strong, nullable) NSNumber *maxContentWidth;
 @property (nonatomic, strong, nullable) NSNumber *contentHeight;
@@ -79,9 +80,6 @@ NS_ASSUME_NONNULL_BEGIN
 @property (nonatomic, assign) BOOL dimmed;
 @property (nonatomic, strong, nullable) NSNumber *dimmedDetentIndex;
 @property (nonatomic, assign) facebook::react::TrueSheetViewBackgroundBlur backgroundBlur;
-@property (nonatomic, strong, nullable) NSNumber *blurIntensity;
-@property (nonatomic, assign) BOOL blurInteraction;
-@property (nonatomic, assign) BOOL glass;
 @property (nonatomic, assign) facebook::react::TrueSheetViewPresentation presentation;
 @property (nonatomic, assign) facebook::react::TrueSheetViewPlacement placement;
 @property (nonatomic, assign) facebook::react::TrueSheetViewInsetAdjustment insetAdjustment;

package/ios/TrueSheetViewController.mm

@@ -74,6 +74,8 @@ static char TrueSheetAccessibilityWindowPreviousElementsKey;
   CGFloat _autoDetentHeight;
   CGFloat _peekDetentHeight;
   NSInteger _pendingDetentIndex;
+  NSInteger _displayedBackgroundIndex;
+  BOOL _usesBackgroundEffects;
 
   // Present/dismiss tracking: a display link scoped to the transition
   // coordinator — started alongside the transition, stopped in its completion.
@@ -112,6 +114,8 @@ static char TrueSheetAccessibilityWindowPreviousElementsKey;
 - (instancetype)init {
   if (self = [super initWithNibName:nil bundle:nil]) {
     _detents = @[ @0.5, @1 ];
+    _detentBackgrounds = @[];
+    _displayedBackgroundIndex = 0;
     _contentHeight = @(0);
     _headerHeight = @(0);
     _footerHeight = @(0);
@@ -134,7 +138,6 @@ static char TrueSheetAccessibilityWindowPreviousElementsKey;
     _activeDetentIndex = -1;
     _pendingDetentIndex = -1;
 
-    _blurInteraction = YES;
     _insetAdjustment = TrueSheetViewInsetAdjustment::Automatic;
     _detentCalculator = [[TrueSheetDetentCalculator alloc] init];
     _detentCalculator.delegate = self;
@@ -370,6 +373,9 @@ static BOOL TrueSheetIsPhoneIdiom(void) {
 }
 
 - (BOOL)isDesignCompatibilityMode {
+  if (@available(iOS 27.0, *)) {
+    return NO;
+  }
   if (@available(iOS 26.0, *)) {
     NSNumber *value = [[NSBundle mainBundle] objectForInfoDictionaryKey:@"UIDesignRequiresCompatibility"];
     return value.boolValue;
@@ -1119,6 +1125,20 @@ static BOOL TrueSheetIsPhoneIdiom(void) {
     }
   }
 
+  if (self.isPresented && !self.isBeingDismissed && !_isWillDismissEmitted && !_usesBackgroundEffects) {
+    NSInteger index = [_detentCalculator backgroundIndexForPosition:position displayedIndex:_displayedBackgroundIndex];
+    if (index != _displayedBackgroundIndex) {
+      _displayedBackgroundIndex = index;
+      [UIView animateWithDuration:0.2
+                            delay:0
+                          options:UIViewAnimationOptionBeginFromCurrentState | UIViewAnimationOptionAllowUserInteraction
+                       animations:^{
+                         [self setupBackground];
+                       }
+                       completion:nil];
+    }
+  }
+
   TrueSheetPositionState state = {
     .position = position,
     .detent = [self interpolatedDetentForPosition:position],
@@ -1227,6 +1247,20 @@ static BOOL TrueSheetIsPhoneIdiom(void) {
   }
 
   [_detentCalculator setDetentCount:self.detents.count];
+  _usesBackgroundEffects = [self canUseBackgroundEffects:detents];
+#if RNTS_IPHONE_OS_VERSION_AVAILABLE(26_1) && !TARGET_OS_MACCATALYST
+  if (@available(iOS 26.1, *)) {
+    if (_usesBackgroundEffects) {
+      for (NSInteger index = 0; index < detents.count; index++) {
+        NSDictionary *entry = [self backgroundForIndex:index];
+        auto blur = entry[@"blur"] ? static_cast<TrueSheetViewBackgroundBlur>([entry[@"blur"] intValue])
+                                   : TrueSheetViewBackgroundBlur::None;
+        detents[index].backgroundEffect = [self backgroundEffectForColor:entry[@"color"] blur:blur];
+      }
+    }
+  }
+#endif
+
   sheet.detents = detents;
 
   if (self.dimmed && [self.dimmedDetentIndex integerValue] == 0) {
@@ -1394,6 +1428,8 @@ static BOOL TrueSheetIsPhoneIdiom(void) {
 
 - (void)setupActiveDetentWithIndex:(NSInteger)index {
   _activeDetentIndex = index;
+  _displayedBackgroundIndex = index;
+  [self setupBackground];
   [self applyActiveDetent];
 }
 
@@ -1407,34 +1443,72 @@ static BOOL TrueSheetIsPhoneIdiom(void) {
   [self applyActiveDetent];
 }
 
-- (void)setupBackground {
-  auto effectiveBackgroundBlur = self.backgroundBlur;
-  if (@available(iOS 26.0, *)) {
-    // iOS 26+ has default liquid glass effect
-  } else if (effectiveBackgroundBlur == TrueSheetViewBackgroundBlur::None && !self.backgroundColor) {
-    effectiveBackgroundBlur = TrueSheetViewBackgroundBlur::SystemMaterial;
+- (BOOL)canUseBackgroundEffects:(NSArray<UISheetPresentationControllerDetent *> *)detents {
+#if RNTS_IPHONE_OS_VERSION_AVAILABLE(26_1) && !TARGET_OS_MACCATALYST
+  if (@available(iOS 26.1, *)) {
+    // Some 26.1 builds omit setters declared in the SDK.
+    if (self.isDesignCompatibilityMode || ![self.sheet respondsToSelector:@selector(setBackgroundEffect:)]) {
+      return NO;
+    }
+    for (UISheetPresentationControllerDetent *detent in detents) {
+      if (![detent respondsToSelector:@selector(setBackgroundEffect:)]) {
+        return NO;
+      }
+    }
+    return YES;
   }
+#endif
+  return NO;
+}
 
-  BOOL hasBlur = effectiveBackgroundBlur != TrueSheetViewBackgroundBlur::None;
+- (NSDictionary *)backgroundForIndex:(NSInteger)index {
+  return index >= 0 && index < self.detentBackgrounds.count ? self.detentBackgrounds[index] : nil;
+}
 
-  _blurView.backgroundBlur = hasBlur ? effectiveBackgroundBlur : TrueSheetViewBackgroundBlur::None;
-  _blurView.blurIntensity = self.blurIntensity;
-  _blurView.blurInteraction = self.blurInteraction;
-  [_blurView applyBlurEffect];
+#if RNTS_IPHONE_OS_VERSION_AVAILABLE(26_1) && !TARGET_OS_MACCATALYST
+- (UIVisualEffect *)backgroundEffectForColor:(UIColor *)color
+                                        blur:(TrueSheetViewBackgroundBlur)blur API_AVAILABLE(ios(26.1)) {
+  if (blur != TrueSheetViewBackgroundBlur::None) {
+    return [UIBlurEffect effectWithStyle:[BlurUtil blurEffectStyleFromEnum:blur]];
+  }
+  return color ? [UIColorEffect effectWithColor:color] : nil;
+}
+#endif
 
+- (void)setupBackground {
 #if RNTS_IPHONE_OS_VERSION_AVAILABLE(26_1) && !TARGET_OS_MACCATALYST
   if (@available(iOS 26.1, *)) {
-    if (!self.isDesignCompatibilityMode) {
-      if (!self.glass || hasBlur) {
-        self.sheet.backgroundEffect = [UIColorEffect effectWithColor:[UIColor clearColor]];
-      } else {
-        self.sheet.backgroundEffect = nil;
-      }
+    if (_usesBackgroundEffects) {
+      self.sheet.backgroundEffect = [self backgroundEffectForColor:self.backgroundColor blur:self.backgroundBlur];
+      self.view.backgroundColor = nil;
+      _blurView.hidden = YES;
+      _blurView.backgroundBlur = TrueSheetViewBackgroundBlur::None;
+      [_blurView applyBlurEffect];
+      return;
     }
   }
 #endif
 
-  self.view.backgroundColor = self.backgroundColor;
+  NSDictionary *entry = [self backgroundForIndex:_displayedBackgroundIndex];
+  BOOL hasEntry = entry[@"color"] || entry[@"blur"];
+  UIColor *color = hasEntry ? entry[@"color"] : self.backgroundColor;
+  auto effectiveBackgroundBlur =
+    hasEntry ? (entry[@"blur"] ? static_cast<TrueSheetViewBackgroundBlur>([entry[@"blur"] intValue])
+                               : TrueSheetViewBackgroundBlur::None)
+             : self.backgroundBlur;
+  if (@available(iOS 26.0, *)) {
+    // iOS 26+ has default liquid glass effect
+  } else if (effectiveBackgroundBlur == TrueSheetViewBackgroundBlur::None && !color) {
+    effectiveBackgroundBlur = TrueSheetViewBackgroundBlur::SystemMaterial;
+  }
+
+  BOOL hasBlur = effectiveBackgroundBlur != TrueSheetViewBackgroundBlur::None;
+
+  _blurView.hidden = NO;
+  _blurView.backgroundBlur = effectiveBackgroundBlur;
+  [_blurView applyBlurEffect];
+
+  self.view.backgroundColor = hasBlur ? nil : color;
 }
 
 - (void)setupGrabber {
@@ -1554,9 +1628,11 @@ static BOOL TrueSheetIsPhoneIdiom(void) {
 #if RNTS_IPHONE_OS_VERSION_AVAILABLE(27_0)
   // iOS 27 exposes native placement. `sourceView` must stay nil since it overrides `preferredPlacement`.
   if (@available(iOS 27.0, *)) {
-    self.sheetPresentationController.sourceView = nil;
-    self.sheetPresentationController.preferredPlacement = [self preferredPlacement];
-    return;
+    if ([self.sheetPresentationController respondsToSelector:@selector(setPreferredPlacement:)]) {
+      self.sheetPresentationController.sourceView = nil;
+      self.sheetPresentationController.preferredPlacement = [self preferredPlacement];
+      return;
+    }
   }
 #endif
 

package/ios/core/TrueSheetBlurView.h

@@ -14,8 +14,6 @@ NS_ASSUME_NONNULL_BEGIN
 @interface TrueSheetBlurView : UIVisualEffectView
 
 @property (nonatomic, assign) facebook::react::TrueSheetViewBackgroundBlur backgroundBlur;
-@property (nonatomic, strong, nullable) NSNumber *blurIntensity;
-@property (nonatomic, assign) BOOL blurInteraction;
 
 /// Adds the blur view to a parent view with proper constraints
 - (void)addToView:(UIView *)parentView;

package/ios/core/TrueSheetBlurView.mm

@@ -13,15 +13,13 @@
 
 using namespace facebook::react;
 
-@implementation TrueSheetBlurView {
-  UIViewPropertyAnimator *_blurAnimator;
-}
+@implementation TrueSheetBlurView
 
 #pragma mark - Initialization
 
 - (instancetype)init {
   if (self = [super init]) {
-    _blurInteraction = YES;
+    self.userInteractionEnabled = NO;
   }
   return self;
 }
@@ -38,45 +36,14 @@ using namespace facebook::react;
   [parentView insertSubview:self atIndex:0];
 }
 
-- (void)clearAnimator {
-  if (_blurAnimator) {
-    [_blurAnimator stopAnimation:YES];
-    _blurAnimator = nil;
-  }
-}
-
 - (void)applyBlurEffect {
-  self.userInteractionEnabled = self.blurInteraction;
-
   if (self.backgroundBlur == TrueSheetViewBackgroundBlur::None) {
-    [self clearAnimator];
     self.effect = nil;
     return;
   }
 
   UIBlurEffectStyle style = [BlurUtil blurEffectStyleFromEnum:self.backgroundBlur];
-  UIBlurEffect *blurEffect = [UIBlurEffect effectWithStyle:style];
-
-  CGFloat intensity =
-    (self.blurIntensity && [self.blurIntensity floatValue] >= 0) ? [self.blurIntensity floatValue] / 100.0 : 1.0;
-
-  if (intensity >= 1.0) {
-    [self clearAnimator];
-    self.effect = blurEffect;
-    return;
-  }
-
-  if (!_blurAnimator) {
-    __weak __typeof(self) weakSelf = self;
-    _blurAnimator = [[UIViewPropertyAnimator alloc] initWithDuration:1.0
-                                                               curve:UIViewAnimationCurveLinear
-                                                          animations:^{
-                                                            weakSelf.effect = blurEffect;
-                                                          }];
-  }
-
-  _blurAnimator.pausesOnCompletion = YES;
-  _blurAnimator.fractionComplete = intensity;
+  self.effect = [UIBlurEffect effectWithStyle:style];
 }
 
 @end

package/ios/core/TrueSheetDetentCalculator.h

@@ -46,6 +46,7 @@ NS_ASSUME_NONNULL_BEGIN
  For peek (-2) detents, calculates based on header + footer height.
  */
 - (CGFloat)detentValueForIndex:(NSInteger)index;
+- (NSInteger)backgroundIndexForPosition:(CGFloat)position displayedIndex:(NSInteger)displayedIndex;
 
 /**
  Returns the height for auto (-1) detents: content + header + footer height.

package/ios/core/TrueSheetDetentCalculator.mm

@@ -98,6 +98,24 @@
   return 0;
 }
 
+- (NSInteger)backgroundIndexForPosition:(CGFloat)position displayedIndex:(NSInteger)displayedIndex {
+  NSInteger count = self.delegate.detents.count;
+  if (count == 0)
+    return -1;
+
+  CGFloat height = self.delegate.screenHeight - position;
+  NSInteger nextIndex = MAX(0, MIN(displayedIndex, count - 1));
+  CGFloat distance = fabs(height - [self resolvedHeightForIndex:nextIndex]);
+  for (NSInteger index = 0; index < count; index++) {
+    CGFloat nextDistance = fabs(height - [self resolvedHeightForIndex:index]);
+    if (nextDistance < distance) {
+      nextIndex = index;
+      distance = nextDistance;
+    }
+  }
+  return nextIndex;
+}
+
 - (BOOL)findSegmentForPosition:(CGFloat)position outIndex:(NSInteger *)outIndex outProgress:(CGFloat *)outProgress {
   NSArray<NSNumber *> *detents = self.delegate.detents;
   NSInteger count = detents.count;

package/lib/module/TrueSheet.js

@@ -7,6 +7,8 @@ import TrueSheetContentViewNativeComponent from './fabric/TrueSheetContentViewNa
 import TrueSheetHeaderViewNativeComponent from './fabric/TrueSheetHeaderViewNativeComponent';
 import TrueSheetFooterViewNativeComponent from './fabric/TrueSheetFooterViewNativeComponent';
 import TrueSheetModule from "./specs/NativeTrueSheetModule.js";
+import { TrueSheetBackground } from "./TrueSheetBackground.js";
+import { normalizeDetentBackground } from "./detentBackgrounds.js";
 import { Platform, StyleSheet, BackHandler, RootTagContext, findNodeHandle, processColor } from 'react-native';
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 // RN has no public API for hosting the element inspector inside a presented view;
@@ -439,6 +441,9 @@ export class TrueSheet extends PureComponent {
     const {
       detents = [0.5, 1],
       backgroundColor,
+      detentBackgrounds,
+      background,
+      backgroundStyle,
       dismissible = true,
       draggable = true,
       grabber = true,
@@ -449,8 +454,6 @@ export class TrueSheet extends PureComponent {
       initialDetentAnimated = true,
       dimmedDetentIndex,
       backgroundBlur,
-      blurOptions,
-      glass = true,
       cornerRadius,
       maxContentHeight,
       maxContentWidth,
@@ -497,7 +500,10 @@ export class TrueSheet extends PureComponent {
       };
     }
     const sheetContent = /*#__PURE__*/_jsxs(_Fragment, {
-      children: [header && /*#__PURE__*/_jsx(TrueSheetHeaderViewNativeComponent, {
+      children: [/*#__PURE__*/_jsx(TrueSheetBackground, {
+        background: background,
+        backgroundStyle: backgroundStyle
+      }), header && /*#__PURE__*/_jsx(TrueSheetHeaderViewNativeComponent, {
         style: [styles.header, headerOptions?.position === 'absolute' && styles.absoluteHeader, headerStyle],
         children: /*#__PURE__*/isValidElement(header) ? header : /*#__PURE__*/createElement(header)
       }), /*#__PURE__*/_jsx(TrueSheetContentViewNativeComponent, {
@@ -517,9 +523,14 @@ export class TrueSheet extends PureComponent {
       style: styles.sheetView,
       detents: resolvedDetents,
       backgroundBlur: backgroundBlur,
-      blurOptions: blurOptions,
-      glass: glass,
       backgroundColor: backgroundColor,
+      detentBackgrounds: detentBackgrounds && Array.from(detentBackgrounds.slice(0, 3), entry => {
+        const normalized = normalizeDetentBackground(entry);
+        return normalized ? {
+          ...normalized,
+          color: processColor(normalized.color)
+        } : {};
+      }),
       cornerRadius: cornerRadius,
       grabber: grabber,
       grabberOptions: this.resolvedGrabberOptions,