CODEWITHSUNDEEP
iosswiftswiftui
Spielo
Spielo

Reputation: 571

SwiftUI - NavigationBar not showing in Modal NavigationView

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: Screenshot of missing view

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

Upvotes: 7

Views: 3566

Answers (1)

Andrew
Andrew

Reputation: 28539

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.

Upvotes: 13

Related Questions