Hi everyone,
I'm using the new .presentationBackground view modifier to make the background of the sheet a translucent material. From this sheet, I have two nested sheets. In the background of the sheet, I have a pannable map and have also enabled .presentationBackgroundInteraction(.enabled) for the sheet's content. Here's whats happening, whenever I pan around the map or a published property in my view model updates due to a ping to my backend, the sheet's background flickers from the default value. I'm not able to attach videos, but the following code sort of simulates what's happening in my app.
Here is the following code.
struct ContentView: View {
@State var showSheet1 = false
@State var showSheet2 = false
var body: some View {
UserLocationMap(locManager: locManager).ignoresSafeArea()
.sheet(isPresented: $showingMainActivity) {
// ActivitySheet(isLoadingForFirstTime: $isLoadingForFirstTime, addFriends: $addFriends)
Text("Hello")
.presentationDetents([.fraction(0.4), .fraction(0.95)])
.presentationBackground(.ultraThinMaterial)
.presentationBackgroundInteraction(.enabled)
.sheetThatFitsContentInside(isPresented: $editProfile, sheetHeight: $editProfileSheetHeight) {
Text("World")
.padding(100)
.padding(.vertical, 100)
}
}
}
}
struct UserLocationMap: View {
@ObservedObject var locManager: LocationManager
var body: some View {
Map(coordinateRegion: $locManager.region,
interactionModes: .all,
showsUserLocation: true)
}
}
}
extension View {
func sheetThatFitsContentInside<Content>(isPresented: Binding<Bool>,
sheetHeight: Binding<CGFloat>,
expandable: Bool = false,
content: @escaping () -> Content) -> some View where Content : View {
self.sheet(isPresented: isPresented) {
content()
.overlay {
GeometryReader { geometry in
Color.clear.preference(key: InnerHeightPreferenceKey.self, value: geometry.size.height)
}
}
.onPreferenceChange(InnerHeightPreferenceKey.self) { newHeight in
sheetHeight.wrappedValue = newHeight
}
.presentationDetents([.height(sheetHeight.wrappedValue)])
}
}
}
class LocationManager: NSObject, CLLocationManagerDelegate, ObservableObject {
@Published var region = MKCoordinateRegion()
@Published var userLoc: CLLocation?
private let manager = CLLocationManager()
override init() {
super.init()
manager.delegate = self
manager.desiredAccuracy = kCLLocationAccuracyNearestTenMeters
manager.requestWhenInUseAuthorization()
manager.startUpdatingLocation()
}
func locationManager(_ manager: CLLocationManager, didUpdateLocations locations: [CLLocation]) {
locations.last.map { loc in
userLoc = loc
region = MKCoordinateRegion(center: CLLocationCoordinate2D(latitude: loc.coordinate.latitude, longitude: loc.coordinate.longitude),
latitudinalMeters: 1000,
longitudinalMeters: 1000)
}
}
}
Any help is appreciated! The flickering is very prominent, and often times, the sheet won't even have a translucent background until after some interactions have happened. I've already tried creating custom views to constrain changing published values, but what happens is that it works for a bit and then returns to it's normal behavior. Not sure if this is a bug with the modifier or if I'm missing something. Thanks!