Chapter 3 - Embed in NavigationView No Display

In Chapter 3 when you embed the VStack in a NavigationView, the canvas shows a blank area over the top of the view and when the simulator is run the entire screen is blank. At first I thought it was my code but if I run the Final project from the Chapter 3 folder, it has the same problem. If I remove the NavigationView, everything seems fine

29%20PM

I’m running Xcode Version 11.1 (11A1027) which I believe is the latest.

1 Like

It seems like we need to set the NavigationViewStyle for this to work properly.

NavigationView {

}.navigationViewStyle(StackNavigationViewStyle())

This is an issue in Apple’s SwiftUI sample code as well where the BuildingListsAndNavigation example does not include this and also does not work properly.

3 Likes

ViewStyle no longer fixes this.

hi Omran! I had a different “solution”, back in October: I set the navbar title to “” then hide the navbar. You can find it here.

I don’t think the ViewStyle worked for me, even then.

Moin Audrey,

by default I choose the iPad as device. When you embed the VStack into the NavigationView the screen of the iPad goes white (perhaps black when you are in dark mode). This is also valid for the physical device!

changing the device to e.g iPhone Pro everything works fine.

Strange behavior!

I tested it with the ch. 3 and 4 examples.

hi Fritz! On an iPad, the default is split-view, so you have to swipe from the leading edge to show the initial view. This is discussed in Chapter 10, just before the Displaying a list of data section.

But yes, NavigationView isn’t quite 100% yet. :wink:

Moin Audrey,

Thanks for the hint :slightly_smiling_face:
It works that way. Will continue the Course…

regards
Fritz

It works on iPhone 11 Pro emulator but not on iPhone Pro 11 Max and .navigationBarTitle should be inside NavigationView

hi Amir! the width size class of 11 Max in landscape is regular vs compact for 11, so it behaves like an iPad. Unfortunately, it seems to be ignoring StackNavigationViewStyle(). I’m updating this chapter to avoid NavigationView — I only used it to show dark mode, but that has stopped working in preview.

Audrey,

I am confused by the comments that dark mode has stopped working in preview and that StackNavigationViewStyle() is being ignored. I am running the current version of Xcode, 11.4, and both are dark mode and StackNavigationViewStyle() are working for me in the example. Here is my body (not sure how to format code for insertion so hopefully this works without making a mess).

    var body: some View {
        NavigationView {
          VStack(spacing: -6.0) {
                HStack {
                    VStack {
                        Color(red: rTarget, green: gTarget, blue: bTarget)
                        self.showAlert ? Text("R: \(Int(rTarget * 255.0))"
                            + " G: \(Int(gTarget * 255.0))"
                            + " B: \(Int(bTarget * 255.0))")
                            : Text("Match this color")
                    }
                    VStack {
                        ZStack(alignment: .center) {
                            Color(red: rGuess, green: gGuess, blue: bGuess)
                            Text(String(timer.counter))
                                .padding(.all, 5)
                                .background(Color.white)
                                .mask(Circle())
                                .foregroundColor(.black)
                        }
                        Text("R: \(Int(rGuess * 255.0))" +
                            " G: \(Int(gGuess * 255.0))" +
                            " B: \(Int(bGuess * 255.0))")
                    }
                }
                
                Button(action: {
                    self.showAlert = true
                    self.timer.killTimer()
                }) {
                    Text("Hit Me!")
                }.alert(isPresented: $showAlert) {
                    Alert(title: Text("Your Score"), message: Text(String(computeScore())))
                }.padding()
                
                VStack {
                    ColorSlider(value: $rGuess, textColor: .red)
                    ColorSlider(value: $gGuess, textColor: .green)
                    ColorSlider(value: $bGuess, textColor: .blue)
                }.padding(.horizontal)
          }
          .padding(.top, -45.0)
        .navigationBarTitle("Bullseye")
        .navigationBarHidden(true)
        }
        // Need to set the navigationViewStyle here for the views to work in landscape on iPhone 11 Pro Max
        .navigationViewStyle(StackNavigationViewStyle())
        .environment(\.colorScheme, .dark)
    }
1 Like

thanks! that location for navigationViewStyle works!

but colorScheme really wasn’t working for me, not even in debug preview, and I’m pretty sure I was using 11.4, possibly beta.

thanks again! maybe I won’t have to rewrite so much of this chapter after all :smile:

Edited to add: I remember now: I was trying to get .colorScheme(.dark) to work without using NavigationView, because I couldn’t get StackNavigationViewStyle to work. Although it still doesn’t seem right that you have to use NavigationView for dark mode.