.presentationBackground modifer not applied to entire navigation stack

Question

Created Jun ’23

Replies 0

Boosts 1

Participants 1

Hi there! Been searching around online for a while and can't seem to find an answer to help me with this problem, since the .presentationBackground modifier is so new.

Problem:

When applying the .presentationBackground modifier to a presented sheet, the modifer does not get applied to the second view that's presented via a NavigationLink on the presented sheet. The first view that's presented as the sheet has the material background, but the second view from the NavigationLink has a solid white background.

Context:

Running the simulator on iPhone 14 with iOS 16.4 and Xcode 14.3

I currently have a view with a button that presents a sheet:

struct ParentView: View {
    @State private var showingAddItemSheet = false
    
    @available(iOS 16.4, *)
    var body: some View {
        NavigationView {
            VStack {
                Button {
                    showingAddItemSheet.toggle()
                } label: {
                    Image(systemName: "plus")
                        .font(Font.system(size: 32, weight: .semibold))
                        .foregroundColor(Color.white)
                    
                }
                .sheet(isPresented: $showingAddItemSheet) {
                    AddItemView(isPresented: $showingAddItemSheet)
                        .presentationDetents([.fraction(0.6)])
                        .presentationDragIndicator(.visible)
                        .presentationBackground(.ultraThinMaterial)
                }
            }
            .background(Color.green)
        }
    }
}

The sheet contains a NavigationLink to a second view:

struct AddItemView: View {
    @Binding var isPresented: Bool
    @State private var itemName: String = ""
    
    @State private var itemDetails: String = ""
    
    var body: some View {
        NavigationView {
            VStack(alignment: .leading) {
                Text("Add Item")
                
                TextField("Name", text: $itemName)
                
                NavigationLink("Add Item Details") {
                    AddItemDetailsView(itemDetails: $itemDetails)
                }
            }
        }
    }
}

The second view does not maintain the .presentationBackground modifier from the initial sheet, but it does maintain the .presentationDetents and .presentationDragIndicator.

struct AddItemDetailsView: View {
    @Environment(\.dismiss) var dismiss
    
    @Binding var itemDetails: String
    
    var body: some View {
        VStack(alignment: .leading) {
            Text("Add Item Details")
            
            TextField("Details", text: $itemDetails)
            
            Button("Done") {
                dismiss()
            }
        }
    }
}

What I've tried:

None of the following have worked:

Adding the .presentationBackground modifier to the AddItemDetailsView() in the NavigationLink destination
Setting the .background of the AddItemDetailsView to Color.clear or to .ultraThinMaterial directly with the regular .background modifier.
Changing the NavigationView on the AddItemView to a NavigationStack

Would greatly appreciate any ideas or guidance here on how to get the second AddItemDetailsView to use the .ultraThinMaterial background like the first AddItemView sheet!

Boost