Any experience with SwifUI NavigationView in landscape on iPhone XR simulator?

Question

I tried running my app in landscape on an iPhone XR simulator and got a blank screen.

The code below is my test. It works correctly on an iPhone 8 simulator and also not the iPhone XR simulator if I remove the NavigationView.

import SwiftUI

struct ContentView: View {
    var body: some View {
        NavigationView {
            GeometryReader { gp in
                VStack(alignment: HorizontalAlignment.center) {
                    Text("Width: \(gp.size.width)")
                    Text("Height: \(gp.size.height)")
                }
            }
        }
    }
}

I expect that I will see the size of the screen in both landscape and portrait.

Does anyone have any experience with this combination?

score 17 · Accepted Answer · answered Aug 04 '19 at 09:49

There is nothing wrong. It is just that when a big iPhone is in landscape, its horizontal size class is set to .regular, instead of .compact. Think of it, as if it were an iPad.

You can verify it, by sliding from the left size of your screen:

If you change your code to add a default view when nothing is selected, you get this other look:

struct ContentView: View {
    var body: some View {
        NavigationView {
            GeometryReader { gp in
                VStack(alignment: HorizontalAlignment.center) {
                    Text("Width: \(gp.size.width)")
                    Text("Height: \(gp.size.height)")
                    NavigationLink(destination: Text("Something got selected")) { Text("Select something") }
                }

            }

            Text("No Selection")
        }
    }
}

And if you want to force it to .compact, you do the following:

struct ContentView: View {
    var body: some View {
        NavigationView {
            GeometryReader { gp in
                VStack(alignment: HorizontalAlignment.center) {
                    Text("Width: \(gp.size.width)")
                    Text("Height: \(gp.size.height)")
                    NavigationLink(destination: Text("Something got selected")) { Text("Select something") }
                }

            }

            Text("No Selection")
        }.environment(\.horizontalSizeClass, .compact)
    }
}

OK, I accept that that is what is happening but why only in a NavigationView? — Michael Salmon, Aug 04 '19 at 11:55
That is just how they work. The same thing happens with `UINavigationController`. — kontiki, Aug 04 '19 at 11:57

score 1 · Answer 2 · answered Nov 12 '19 at 07:29

1

Adding this modifier to the NavigationView works disabling master - detail views.

NavigationView {
  // Code
}
.environment(\.horizontalSizeClass, .compact)

answered Nov 12 '19 at 07:29

cartes_dev

21
4

Thanks but that was exactly what @kontiki wrote. – Michael Salmon Nov 13 '19 at 08:03
Yes, I just wanted to put a quick answer. I just started with stack overflow, sorry for the redundancy. – cartes_dev Nov 14 '19 at 09:06

score 0 · Answer 3 · answered Nov 11 '21 at 18:40

Another way to solve this is to force the NavigationView to stack style.

NavigationView {
    Text("Hello World")
    }.navigationViewStyle(StackNavigationViewStyle())

Or the newer:

NavigationView {
    Text("Hello World")
    }.navigationViewStyle(.stack)

Any experience with SwifUI NavigationView in landscape on iPhone XR simulator?

3 Answers3

Linked