Stopping Navigation Controller? from Appearing When Scrolling to the Bottom

Question

I have four horizontal stacks (HStack) inside ScrollView and VStack. And I have a pair of ZStack things inside each horizontal stack (HStack). The following is my code.

import SwiftUI

struct ContentView: View {
    var body: some View {
        NavigationView {
            ScrollView {
                VStack(spacing: 0) {
                    HStack(spacing: 0) {
                        ZStack {
                            Rectangle().frame(width: UIScreen.screenWidth / 2.0, height: UIScreen.screenWidth / 2.0, alignment: .topLeading)
                                .foregroundColor(.orange)
                                .border(Color.yellow, width: 2)
                            NavigationLink(destination: AliceView()) {
                                Text("Alice")
                                    .foregroundColor(Color.black)
                                    .font(.largeTitle)
                            }
                        }
                        ZStack {
                            Rectangle().frame(width: UIScreen.screenWidth / 2.0, height: UIScreen.screenWidth / 2.0, alignment: .topLeading)
                                .foregroundColor(.orange)
                                .border(Color.yellow, width: 2)
                            NavigationLink(destination: KimView()) {
                                Text("Kim")
                                    .foregroundColor(Color.black)
                                    .font(.largeTitle)
                            }
                        }
                    }

                    HStack(spacing: 0) {
                        ...
                        ...
                        ...
                    }

                    HStack(spacing: 0) {
                        ...
                        ...
                        ...
                    }

                    HStack(spacing: 0) {
                        ...
                        ...
                        ...
                    }
                }
            }
            .edgesIgnoringSafeArea(.all)
            .statusBar(hidden: true)
            .navigationBarTitle("")
        }
    }
}

When I scroll to the top, nothing appears at the top of the screen. But when I scroll to the bottom, a horizontal strip looking like the navigation controller appears. How can I stop the horizontal strip looking like the navigation control from appearing? Thanks.

Answer 1

You need to hide navigation bar

.navigationBarTitle("")
.navigationBarHidden(true)    // << add this !!