Search code examples
iosswiftswiftuiswiftui-navigationlinkswiftui-navigationview

Navigation Bar appearing when device is rotated to landscape using SwiftUI


The screen is working perfectly fine (No navigation bar) in:

  • iPhone portrait mode
  • iPad portrait mode
  • iPad landscape mode

It is only showing navigation bar (out of nowhere) in iPhone landscape mode.

Can anyone please suggest what am I doing wrong or what can be done to disappear the navigation bar even in iPhone landscape mode? Thanks in advance.

Attaching screenshots of both portrait and landscape mode here.

Navigation bar appearing in landscape mode

Working fine (no navigation bar) in portrait mode

struct LoginView: View {

@ObservedObject var vm = LoginVM()

var body: some View {
    NavigationView {
        VStack {
                TextField("Username", text: $vm.username)
                    .padding()
                    .overlay(RoundedRectangle(cornerRadius: 10)
                    .stroke(Color.blue, lineWidth: 0.5))
                    .padding([.top, .bottom])
                
                SecureField("Password / SMS Code", text: $vm.password)
                    .padding()
                    .overlay(RoundedRectangle(cornerRadius: 10)
                    .stroke(Color.blue, lineWidth: 0.5))
                    .padding(.bottom, 20)
                
                HStack {
                    Spacer()
                    NavigationLink(
                        destination: ForgotPassView(),
                        label: {
                            Text("Forgot Password ?")
                    }).padding(.bottom, 40)
            }
        }.padding()
    }
    .navigationViewStyle(StackNavigationViewStyle())
}

}


Solution

  • Add .navigationBarHidden(true) to the child view of NavigationView:

    var body: some View {
            NavigationView {
                VStack {
                    TextField("Username", text: $vm.username)
                        .padding()
                        .overlay(RoundedRectangle(cornerRadius: 10)
                                    .stroke(Color.blue, lineWidth: 0.5))
                        .padding([.top, .bottom])
                    
                    SecureField("Password / SMS Code", text: $vm.password)
                        .padding()
                        .overlay(RoundedRectangle(cornerRadius: 10)
                                    .stroke(Color.blue, lineWidth: 0.5))
                        .padding(.bottom, 20)
                    
                    HStack {
                        Spacer()
                        NavigationLink(
                            destination: ForgotPassView(),
                            label: {
                                Text("Forgot Password ?")
                            }).padding(.bottom, 40)
                    }
                }
                .padding()
                .navigationBarHidden(true) //<-- here
            }
            .navigationViewStyle(StackNavigationViewStyle())
        }