SwiftUI - Issue when trying to hide navigationbar

Question

I'm encountering difficulties in hiding the navigation bar in SwiftUI. Despite using .navigationBarHidden(true), the navigation bar remains visible. Here is my code:

struct LogInPage: View {
    // some state variables

    var body: some View {
        NavigationView {
            ZStack {
                // some code including a HStack

                VStack(spacing: 35) {
                    // some code

                    Toggle("", isOn: $showPassword)
                        .offset(x: -185)

                    Button(action: {
                        print("Log in button was pressed")
                    }) {
                        Text("Logga in")
                            .foregroundColor(.white)
                            .padding()
                            .background(RoundedRectangle(cornerRadius: 10).fill(Color(red: 0.6, green: 0.24, blue: 0.73)))
                    }
                    .offset(y: 20)

                    HStack(spacing: 15) {
                        // some code
                    }
                    .offset(y: 30)

                    Button(action: {
                        print("Register button was pressed")
                        isNavigating = true
                    }) {
                        Text("Skapa konto")
                            .foregroundColor(.white)
                            .padding()
                            .background(RoundedRectangle(cornerRadius: 10).fill(Color(red: 0.6, green: 0.24, blue: 0.73)))
                    }
                    .offset(y: 60)

                    NavigationLink(
                        destination: RegisterPage(),
                        isActive: $isNavigating,
                        label: {
                            EmptyView()
                        }
                    )
                }
            }
            .navigationBarHidden(true) // trying to hide my navigation bar here
      
               
        }
    }
}

I have tried a lot of different ways to solve this problem:

1. By trying this .navigationBarHidden(true), nothing changed
2. By trying this .navigationBarHidden(true), nothing changed .navigationBarBackButtonHidden(true)`
3. By trying this .navigationBarHidden(true) .navigationBarBackButtonHidden(true) .navigationBarTitle("", displayMode: .inline) , this actually helped me hide my navigation bar text but the arrow still remains.
4. I have also tried to set .navigationBarHidden(true) in many parts of my code but still this didn't change anything.
5. I've also checked other people's solution in stackoverflow, who had this problem, but nothing worked.

I think my problem is related to child views and how I have structured my code. I'm not a pro and I am sure my code structure is not so professional. Any help is appreciated.

Answer 1

Why do you wrap the contents inside NavigationView and also want to hide the navigation view? Just remove the outer NavigationView. It should work.

var body: some View {
    //NavigationView { <- remove
        ZStack {
            ...
        }
        .navigationBarHidden(true)
    //}
}

If your contents were wrapped inside a NavigationView, the view will create another navigation view. You can check it out by .navigationBarHidden(false).

Suppose that the outside view of your LogInPage already embedded in NavigationView/Stack. The first attached image is with NavigationView. You can see 2 navigation bar views (above and below), separately. The second one is without NavigationView. It had a single navigation bar.

Image 1:

Image 2: