Can a Modal Sheet have a Navigation Bar in SwiftUI?

Question

I am presenting a modal sheet from a navigation bar button in my code:

struct MainPage : View {

    @State var isModalSheetShown: Bool = false

    var body: some View {
        VStack {
            [...]
        }
        .navigationBarItems(trailing: HStack {
            Button(action: { self.isModalSheetShown = true }) {
                Text("Add")
            }
        })
        .sheet(isPresented: $isModalSheetShown, content: {
            VStack {
                [...]
            }
            .navigationBarItems(trailing: HStack {
                Button(action: { ... }) {
                    Text("Done")
                })
            })
        })
    }
}

But the Navigation Bar does not appear in the modal sheet as you can see below.

What am I doing wrong, how do you put a navigation bar on a modal sheet?

score 44 · Accepted Answer · edited Dec 07 '22 at 15:59

44

You have to wrap your modal view in a NavigationView like this

@State var isModalSheetShown: Bool = false

var body: some View {
    VStack {
        Text("Main")
    }
    .navigationBarItems(trailing: Button("Add",
                                         action: { self.isModalSheetShown = true }))
    .sheet(isPresented: $isModalSheetShown) {
        NavigationView {
            VStack {
                Text("Modal")
            }
            .navigationBarItems(trailing: Button("Done",
                                                 action: {}))
        }
    }
}

edited Dec 07 '22 at 15:59

Kamchatka

3,597
4
38
69

answered Jan 12 '20 at 10:59

LuLuGaGa

13,089
6
49
57

2

Indeed, I missed the NavigationView wrap. Thank you :) – iSpain17 Jan 12 '20 at 11:03
perfect answer, @lulugaga. Can this NavigationView (that's modally presented) then push another controller onto its stack? – Paul Bruneau Oct 05 '21 at 16:43
1

@PaulBruneau Yes, you can navigate further within the modal. – LuLuGaGa Oct 06 '21 at 07:41
Hi @LuLuGaGa the done button does not click. Any reason why please? – King Nov 20 '21 at 21:04

score 3 · Answer 2 · answered Mar 12 '20 at 02:43

Modal view must be wrapped in NavigationView but the above solution using .navigationBarItems(trailing: Button("Done", action: {})) is not working for me. What worked for me is, in the modal view I have to add a navigationButton and also to show the navigation bar I have to use the .navigationBarTitle("", displayMode: .inline). So this is part of my ModalView code:

  var body: some View {
        VStack (alignment: .leading, spacing: 10) {
            header
            infoBody
            Spacer()
        }
        .padding()
        .navigationBarItems(leading: btnBack)
        .navigationBarTitle("", displayMode: .inline)
    }

Can a Modal Sheet have a Navigation Bar in SwiftUI?

2 Answers2

Linked