SwiftUI Navigation on iPad - How to show master list

Question

My app has simple navigation needs

• List View (parent objects)
• List View (child objects)
• Detail View (child object)

I have this setup and working on iPhone, but when I run the app on iPad in portrait mode the master list is always hidden.

I'm using .isDetailLink(false) on the navigation link from the first list to the second, so both lists always stay in the master column. In iPad landscape everything works as expected but in portrait the detail view fills the screen. I can swipe in from the left side of the screen to show the list but I'd like to provide more clarity to the user.

I'd like to show or add the back button to show the master/list side (sort of like the Apple Notes app). On the iPhone I get the back button by default but on iPad in portrait mode there is nothing in its place.

This is what I see on iPhone

But this is what I see on iPad

Parent list

struct ParentList: View {

    let firstList = ["Sample data 01", "Sample data 02", "Sample data 03", "Sample data 04", "Sample data 05"]

    var body: some View {
        NavigationView {
            List{
                ForEach(firstList, id: \.self) { item in
                    NavigationLink(destination: ChildList()){

                        Text(item)
                    }
                    .isDetailLink(false)

                }
            }
        }
    }
}

Child list

struct ChildList: View {

    let secondList = ["More Sample data 01", "More Sample data 02", "More Sample data 03", "More Sample data 04", "More Sample data 05"]

    var body: some View {
        List{
            ForEach(secondList, id: \.self) { item in
                NavigationLink(destination: ChildDetail()){

                    Text(item)

                }
            }
        }
    }
}

Child detail

struct ChildDetail: View {

    var body: some View {
        Text("Child detail view")
    }

}

Update: As of Oct 17, 2019 I have not found a way to get this to work. I decided to use .navigationViewStyle(StackNavigationViewStyle()) for the time being. Interestingly, this needs to go outside of the navigation view like a normal modifier, not inside it with the navigation title.

Answer 1

In portrait the default split view does not work. This may be fixed in future but it appears the current options are:
(a) change the navigation view style of your first list to .navigationViewStyle(StackNavigationViewStyle()) so the navigation will work like on iPhone and push each view.

(b) leave the style to default and only support landscape for iPad

(c) implement a UIKit split view controller

Answer 2

There also is a quite hacky workaround (see https://stackoverflow.com/a/57215664/3187762)

By adding .padding() to the NavigationView it seems to achieve the behaviour of always display the Master.

NavigationView {
        MyMasterView()
        DetailsView()
 }.navigationViewStyle(DoubleColumnNavigationViewStyle())
  .padding()

Not sure if it is intended though. Might break in the future (works using Xcode 11.0, in simulator on iOS 13.0 and device with 13.1.2).

You should not rely on it. This comment seems to be the better answer: https://stackoverflow.com/a/57919024/3187762

Answer 3

in iOS 13.4, a "back to master view" button has been added to the iPad layout. From the release notes:

When using a NavigationView with multiple columns, the navigation bar now shows a control to toggle the columns. (49074511)

For example:

struct MyNavView: View {
    var body: some View {
        NavigationView {
            NavigationLink(
                destination: Text("navigated"), 
                label: {Text("Go somwhere")}
            )
            .navigationBarTitle("Pick Item")
        }
    }
}

Has the following result:

Answer 4

Look this solution here

I hope this help

Answer 5

For my project I'm using this extension. They will always use StackNavigationViewStyle for iPhone, iPad in a vertical orientation, and if you provide forceStackedStyle: true. Otherwise DoubleColumnNavigationViewStyle will be used.

var body: some View {
  NavigationView {
    Text("Hello world")
  }
  .resolveNavigationViewStyle(forceStackedStyle: false)
}

extension View {
    func resolveNavigationViewStyle(forceStackedStyle: Bool) -> some View {
        
        if forceStackedStyle || UIDevice.current.userInterfaceIdiom == .phone {
            return self.navigationViewStyle(StackNavigationViewStyle())
                .eraseToAnyView()
        } else {
            return GeometryReader { p in
                if p.size.height > p.size.width { self.navigationViewStyle(StackNavigationViewStyle())
                } else {
                    self.navigationViewStyle(DoubleColumnNavigationViewStyle())
                }
            }
            .eraseToAnyView()
        }
    }
}