SwiftUI: unwanted split view on iPad

13,538

Solution 1

You can apply the .navigationViewStyle(.stack) modifier to the NavigationView!

... 
    NavigationView {
        Text("Hello world!")
    }
    .navigationViewStyle(.stack)
...

Edit: Below, I am answering Alexandre's questions from his comment:

  • Why full view is not the default for iPad? That's just a choice made by Apple...

  • Why this modifier goes outside of NavigationView closure, while the Navigation Title goes inside... Maybe this gives clarification: https://stackoverflow.com/a/57400873/11432719

Solution 2

To use this split style for iPad but remove for iPhone:

    extension View{
    func phoneOnlyStackNavigationView() ->some View{

        if UIDevice.current.userInterfaceIdiom == .phone{
            return AnyView(self.navigationViewStyle(StackNavigationViewStyle()))
        }else{
            return AnyView(self)
        }
    }
}
Share:
13,538
Mane Manero
Author by

Mane Manero

Updated on June 05, 2022

Comments

  • Mane Manero
    Mane Manero almost 2 years

    Problem: a view on Pad shows up with unwanted split view.

    My current setup is: Catalina OSX beta 5 + Xcode 11 Beta 5

    Here is the code I used, with a Navigation View and a Navigation Title:

    import SwiftUI
    
    struct SwiftUIView: View {
        var body: some View {
            NavigationView {
                Text("Search")
                    .navigationBarTitle(Text("Search"))
            }
        }
    }
    
    #if DEBUG
    struct SwiftUIView_Previews: PreviewProvider {
        static var previews: some View {
            SwiftUIView()
        }
    }
    #endif
    

    When simulated on iPad (both physical device and preview) instead of a full screen view, I get this split screen view:

    Unwanted split view with NavigationView

    If I have just a view, with no NavigationView, I get a full screen view:

    import SwiftUI
    
    struct SwiftUIView: View {
        var body: some View {
            Text("Hello World!")
        }
    }
    
    #if DEBUG
    struct SwiftUIView_Previews: PreviewProvider {
        static var previews: some View {
            SwiftUIView()
        }
    }
    #endif
    

    Full screen, but without NavigationView

    How can I make a NavigationView full screen (not split screen) on iPad?