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?

Answer 1

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)
    }
}

Answer 2

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

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

Answer 3

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)