78

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?

Kalle Richter
  • 8,008
  • 26
  • 77
  • 177
Mane Manero
  • 3,086
  • 5
  • 25
  • 47

2 Answers2

203

Update July 2022

Using NavigationStack instead of NavigationView should display as the main view as you would expect on iPad:

NavigationStack {
    Text("Hello world!")
}

*In newer versions, the navigationViewStyle modifier has been deprecated.

Original answer:

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

cbjeukendrup
  • 3,216
  • 2
  • 12
  • 28
8

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)
        }
    }
}
Md. Ibrahim Hassan
  • 5,359
  • 1
  • 25
  • 45
Atif Shabeer
  • 553
  • 6
  • 18
  • By default, iPad navigationViewStyle isn't Stack but iPhone default navigationViewStyle is Stack. Its automatic. – Farras Doko Oct 16 '20 at 03:01
  • 1
    Not really, on iPhone XR and 11 for instance, the default navigationViewStyle is DoubleColumn. This code snippet essentially forces the stack style on those classes of iPhone. – LaX Oct 25 '20 at 20:25
  • 1
    This might be me going crazy, but where do I call this function? – SwiftUser Mar 12 '21 at 04:53
  • @SwiftUser on the body of your SwiftUI view like any other view modifier. – Olcay Ertaş Dec 06 '22 at 08:46