How to apply .presentationBackground modifier to a second view in a sheet with NavigationLink?

Question

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 to get the .presentationBackground(.ultraThinMaterial) to apply to the second view :

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!

score 0 · Answer 1 · answered Jun 11 '23 at 12:28

I played with it a little, and to my understanding, a NavigationLink does not have the same capabilities as a Sheet and vice versa. So instead of using a NavigationLink, you could use another Sheet, but the view hierarchy does NOT make it the same material, because it will be in front of another Sheet.

struct AddItemView: View {
    @Binding var isPresented: Bool
    @State private var itemName: String = ""
    
    @State private var itemDetails: String = ""
    
    @State private var showingAddItemSheet = false
    
    var body: some View {
        NavigationView {
            VStack(alignment: .leading) {
                Text("Add Item")
                
                TextField("Name", text: $itemName)
                
                Button {
                    showingAddItemSheet.toggle()
                } label: {
                    Text("Add Item Details")
                }
            }
            .sheet(isPresented: $showingAddItemSheet) {
                AddItemDetailsView(itemDetails: $itemDetails)
                    .presentationDetents([.fraction(0.6)])
                    .presentationDragIndicator(.visible)
                    .presentationBackground(.ultraThinMaterial)
            }
        }
    }
}

If you would pull the AddItemView sheet to the top, you will see a small difference in the material, but as I said, a Sheet on top of a Sheet with both having the modifier, just makes it a bit darker, because it looks onto the other Sheet.

Thanks so much for taking a look - I really appreciate it! Would you happen to know if there's another way to present a second view in a sheet while preserving the sheet capabilities? I'd love to maintain the horizontal sliding in of a second view in a sheet without having to add another sheet on top, but that's definitely a good option! — Hana Kim, Jun 12 '23 at 18:15
You could look into his second code answer and change it to your needs. It basically works with animations and transitions to achieve your desired output. https://stackoverflow.com/a/58571403/13597528 — bennyyy999, Jun 15 '23 at 09:09

How to apply .presentationBackground modifier to a second view in a sheet with NavigationLink?

1 Answers1