Description
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