50

Using SwiftUI, I've built a NavigationView that takes the user to another NavigationView, and finally, to a simple View. When I get to the last view, I can see two back buttons and a very large Navigation Bar.

GIF showing nested navigation bars

I'd like to have a navigation structure similar to the iOS Settings app, where one navigation list takes to another and each of them have one back button that goes back to the previous screen.

Does anyone know how to solve this?

Tamás Sengel
  • 55,884
  • 29
  • 169
  • 223
Thiago Mundim
  • 523
  • 1
  • 4
  • 7

3 Answers3

81

You should only have one NavigationView in your view hierarchy, as an ancestor of the menu view. You can then use NavigationLinks at any level of the hierarchy under that.

So, for example, your root view could be defined like this:

struct RootView: View {
    var body: some View {
        NavigationView {
            MenuView()
                .navigationBarItems(trailing: profileButton)
        }
    }

    private var profileButton: some View {
        Button(action: { }) {
            Image(systemName: "person.crop.circle")
        }
    }
}

Then your menu view has NavigationLinks to the appropriate views:

struct MenuView: View {
    var body: some View {
        List {
            link(icon: "calendar", label: "Appointments", destination: AppointmentListView())
            link(icon: "list.bullet", label: "Work Order List", destination: WorkOrderListView())
            link(icon: "rectangle.stack.person.crop", label: "Contacts", destination: ContactListView())
            link(icon: "calendar", label: "My Calendar", destination: MyCalendarView())
        }.navigationBarTitle(Text("Menu"), displayMode: .large)
    }

    private func link<Destination: View>(icon: String, label: String, destination: Destination) -> some View {
        return NavigationLink(destination: destination) {
            HStack {
                Image(systemName: icon)
                Text(label)
            }
        }
    }
}

Your appointment list view also contains NavigationLinks to the appointment detail views:

struct AppointmentListView: View {
    var body: some View {
        List {
            link(destination: AppointmentDetailView())
            link(destination: AppointmentDetailView())
            link(destination: AppointmentDetailView())
        }.navigationBarTitle("Appointments")
    }

    private func link<Destination: View>(destination: Destination) -> some View {
        NavigationLink(destination: destination) {
            AppointmentView()
        }
    }
}

Result:

demo

rob mayoff
  • 375,296
  • 67
  • 796
  • 848
  • 1
    Rob, you are both an angel and a genius! thank you so much for the help! – Thiago Mundim Jul 19 '19 at 20:10
  • My simulator/canvas freezes when I push a new `List` from a `NavigationLink` that is already within a `List`, and no error gets thrown. Has anyone else run into this issue? I've cloned the code above and am still running into the same issue. – Iron John Bonney Feb 15 '20 at 18:29
  • Yes I do run in the same freezing problem. Were you able to solve it? – JDK92 Jun 10 '20 at 16:28
  • @IronJohnBonney I too am running into this problem it's so frustrating. Have you found a work around? – KissTheCoder Jan 18 '21 at 02:24
  • @Spood I did find a workaround. I think it had something to do with me customizing the appearance of the UINavigationBar in AppDelegate, and then pushing a list within a list like mentioned. Once I got rid of appearance customization I had no issues. I ended up having to customize appearance elsewhere from within the SwiftUI code. I'll double check to make sure this was the issue I ran into, going off memory at the moment. – Iron John Bonney Feb 19 '21 at 18:47
  • let's say AppointmentListView doesn't know who will show it. or could be shown in the app either in navigationview or presentation sheet . how would you guys tackle this issue? – justicepenny Mar 17 '21 at 16:06
0

If you create the Menu View with NavigationLinks but don't declare it inside a NavigationView, you'll get the child view without NavigationBar.

SwiftyGonzales
  • 11
  • 1
0

Do not use NavigationView to wrap your list in the "AppointmentView"

e.g.

NavigationView{
  List{
  }
}

But only use List in the "AppointmentView"

  List{
  }

you can still use NavigationLink inside that List

Sanjo
  • 41
  • 4