SwiftUI - NavigationBar not showing in Modal NavigationView

Question

Trying to make a modal that's similar to the "Create Event" modal in Apple's Calendar app. I've got my modal successfully showing using the following code in a parent NavigationView:

.navigationBarItems(trailing:
                    Button(action: {
                        self.isModal = true
                        }) {
                        Image(systemName: "plus").sheet(isPresented: $isModal, content: {
                            EventCreate(showModal: self.$isModal)
                        })
                    }
            )

The modal shows successfully, but I can't get a NavigationBar to show in the modal, which looks like this:

struct EventCreate: View {

    @Binding var showModal: Bool

    @State var event = Event(id: 0, title: "", description: "", location: "", start: Date(), end: Date(), cancelled: false, public_occurrence: false, created: "", last_updated: "", guests: -1)

    var body: some View {
        NavigationView {
            Form{
                Section {
                    TextField("Title", text: $event.title)
                    TextField("Location", text: $event.location)
                }
                Section {
                    DatePicker(selection: $event.start, label: { Text("Start") })
                    DatePicker(selection: $event.end, label: { Text("End") })
                }
            }
        }
        .navigationBarTitle(Text("Create Event"), displayMode: .inline)
        .navigationBarItems(leading:
            Button("Close") {
                self.showModal = false
        })

    }
}

The app builds, and the Form is displayed, but the NavigationView doesn't:

How can I make this show? Or is there another view I should be using instead of NavigationView

Answer 1

You need to put navigationBarTitle and navigationBarItems modifier inside the NavigationView, not outside it. These modifiers must be placed on the view that you are embedding, in your case the Form

struct EventCreate: View {

    @Binding var showModal: Bool

    @State var event = Event(id: 0, title: "", description: "", location: "", start: Date(), end: Date(), cancelled: false, public_occurrence: false, created: "", last_updated: "", guests: -1)

    var body: some View {
        NavigationView {
            Form{
                Section {
                    TextField("Title", text: $event.title)
                    TextField("Location", text: $event.location)
                }
                Section {
                    DatePicker(selection: $event.start, label: { Text("Start") })
                    DatePicker(selection: $event.end, label: { Text("End") })
                }
            }
            .navigationBarTitle(Text("Create Event"), displayMode: .inline)
            .navigationBarItems(leading:
            Button("Close") {
                self.showModal = false
            })
       }
    }
}

This article by HackingWithSwift shows the correct placement.