Skip to content

BackgroundColor / BlurTint don't cover the entire screen iOS #190

Open
@Emmapr123

Description

@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

Metadata

Metadata

Assignees

No one assigned

    Labels

    bugSomething isn't working

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions