BackgroundColor / BlurTint don't cover the entire screen iOS

[Emmapr123]

Before submitting a new issue

• I tested using the latest version of the library, as the bug might be already fixed.
• I tested using a supported version of react native.
• I checked for possible duplicate issues, with possible answers.

Bug summary

My designer pointed out to me that the dimmed overlay was too light to pass accessibility checks on iOS. I tried using the blurTint and backgroundColor props, but the only thing that I could see change, was behind where we had rounded off the colours, suggesting that the backgroundView sticks to the bounds of the view, not of the window.

I tried a bunch of things, now I have never worked with swift before so I'm not entirely sure what I'm doing.
I managed to make it work to stick to the window size instead of the view bounds, but with that, since for now I've just added it as a patch-package to my app, I do set the colour on the same function that sets the size of the backgroundView.

I am not entirely sure how to make this work with the blurTint and backgroundColor props.

either way, this patch worked for me to get it in the color and opacity that I want, would love to hear ideas on how to make this work with the props as well

diff --git a/node_modules/@lodev09/react-native-true-sheet/ios/TrueSheetViewController.swift b/node_modules/@lodev09/react-native-true-sheet/ios/TrueSheetViewController.swift
index a116617..8187b48 100644
--- a/node_modules/@lodev09/react-native-true-sheet/ios/TrueSheetViewController.swift
+++ b/node_modules/@lodev09/react-native-true-sheet/ios/TrueSheetViewController.swift
@@ -142,8 +142,27 @@ class TrueSheetViewController: UIViewController, UISheetPresentationControllerDe
   override func viewWillAppear(_ animated: Bool) {
     super.viewWillAppear(animated)
     delegate?.viewControllerWillAppear()
+
+    insertBackgroundInPresentingView()
   }
 
+  override func viewWillDisappear(_ animated: Bool) {
+    super.viewWillDisappear(animated)
+
+      if let coordinator = transitionCoordinator {
+        coordinator.animate(alongsideTransition: { _ in
+          self.backgroundView.alpha = 0
+        }, completion: { context in
+          if context.isCancelled == false {
+            self.backgroundView.removeFromSuperview()
+          }
+        })
+      } else {
+        backgroundView.alpha = 0
+        backgroundView.removeFromSuperview()
+      }
+    }
+
   override func viewDidDisappear(_ animated: Bool) {
     super.viewDidDisappear(animated)
     delegate?.viewControllerDidDismiss()
@@ -172,6 +191,28 @@ class TrueSheetViewController: UIViewController, UISheetPresentationControllerDe
     }
   }
 
+  func insertBackgroundInPresentingView() {
+    guard let container = presentingViewController?.view, backgroundView.superview != container else { return }
+
+    backgroundView.translatesAutoresizingMaskIntoConstraints = false
+    backgroundView.backgroundColor = UIColor(red: 0, green: 0, blue: 0, alpha: 0.6)
+    container.insertSubview(backgroundView, belowSubview: container.subviews.first { $0 is UIVisualEffectView } ?? self.view)
+
+    NSLayoutConstraint.activate([
+      backgroundView.topAnchor.constraint(equalTo: container.topAnchor),
+      backgroundView.bottomAnchor.constraint(equalTo: container.bottomAnchor),
+      backgroundView.leadingAnchor.constraint(equalTo: container.leadingAnchor),
+      backgroundView.trailingAnchor.constraint(equalTo: container.trailingAnchor)
+    ])
+
+    
+    // Animate in sync with presentation
+    UIView.animate(withDuration: 0.3) {
+      self.backgroundView.alpha = 0.6
+    }
+
+  }
+
   /// Setup dimmed sheet.
   /// `dimmedIndex` will further customize the dimming behavior.
   @available(iOS 15.0, *)

Library version

2.0.5

Environment info

System:
OS: macOS 15.5
CPU: (12) arm64 Apple M4 Pro
Memory: 114.88 MB / 48.00 GB
Shell:
version: "5.9"
path: /bin/zsh
Binaries:
Node:
version: 20.19.2
path: ~/.nvm/versions/node/v20.19.2/bin/node
Yarn: Not Found
npm:
version: 11.4.2
path: ~/.nvm/versions/node/v20.19.2/bin/npm
Watchman:
version: 2025.05.26.00
path: /opt/homebrew/bin/watchman
Managers:
CocoaPods:
version: 1.16.2
path: xxx
SDKs:
iOS SDK:
Platforms:
- DriverKit 24.2
- iOS 18.2
- macOS 15.2
- tvOS 18.2
- visionOS 2.2
- watchOS 11.2
Android SDK: Not Found
IDEs:
Android Studio: 2025.1 AI-251.25410.109.2511.13665796
Xcode:
version: 16.2/16C5032a
path: /usr/bin/xcodebuild
Languages:
Java:
version: 17.0.15
path: /usr/bin/javac
Ruby:
version: 2.7.7
path: /Users/gbemaspr/.rbenv/shims/ruby
npmPackages:
"@react-native-community/cli":
installed: 18.0.0
wanted: latest
react:
installed: 18.3.1
wanted: 18.3.1
react-native:
installed: 0.76.3
wanted: 0.76.3
react-native-macos: Not Found
npmGlobalPackages:
"react-native": Not Found
Android:
hermesEnabled: true
newArchEnabled: false
iOS:
hermesEnabled: true
newArchEnabled: false

Steps to reproduce

Add a trueSheet and try to use blur or backgroundColor

Reproducible example repository

NA