Navigate one view to another in swiftUI

Question

I have two button One is for login and other one is for registration. When login button is I am redirecting to Login view and When I click the registration button I am expecting to redirect to registration view . It working fine but I am facing some issue .

1. When I add the navigation link , the button height is overlap.
2. When I navigate to other view with button click the overlay still visible with back button.
3. I got this warning.. 'init(destination:isActive:label:)' was deprecated in iOS 16.0: use NavigationLink(value:label:) inside a NavigationStack or NavigationSplitView

here is the code ..

 import SwiftUI

struct ContentView: View {
    @State private var path = NavigationPath() // <--- here

    var body: some View {
        NavigationStack(path: $path) { // <--- here
            VStack(alignment: .center) {
               // Image("login")
                Image("login")
                    .resizable()
                    .aspectRatio(contentMode: .fit)
                    .cornerRadius(10)
                    .padding()

                Text("Hello !")
                    .font(.title)
                    .bold()
                Text("Please select the Option")
                    .bold()
                Button {
                    path.append("LoginView") // <--- here
                    print("Login button was tapped")
                } label: {
                    Text("Login")
                        .padding()
                        .foregroundStyle(.white)
                        .frame(height: 60)
                        .frame(maxWidth: .infinity)
                        .background(.blue)
                }

                Button {
                    path.append("Registration")  // <--- here
                    print("Registration button was tapped")
                } label: {
                    Text("Registration")
                        .padding()
                        .foregroundStyle(.white)
                        .frame(height: 60)
                        .frame(maxWidth: .infinity)
                        .background(.blue)
                }
            }
            // --- here
            .navigationDestination(for: String.self) { destination in
                if destination == "LoginView" {
                    LoginView()
                } else {
                    RegistrationView()
                }
            }
            // --- here
            .toolbar {
                ToolbarItem(placement: .navigationBarLeading) {
                    HStack {
                        Circle()
                            .fill(.blue)
                            .frame(width: 40, height: 40)
                        Text("SLOP")
                            .font(.system(size: 20))
                            .fontWeight(.medium)
                    }
                    .padding(.leading, 20)
                }
            }
        }
    }
}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}

Here is the screenshot...

Answer 1

There are many ways to deal with your issues.

Here is an alternative approach using a .toolbar{...} instead of an .overlay.

struct ContentView: View {
    @State private var path = NavigationPath() // <--- here
    
    var body: some View {
        NavigationStack(path: $path) { // <--- here
            VStack(alignment: .center) {
               // Image("login")
                Image(systemName: "house")
                    .resizable()
                    .aspectRatio(contentMode: .fit)
                    .cornerRadius(10)
                    .padding()

                Text("Hello !")
                    .font(.title)
                    .bold()
                Text("Please select the Option")
                    .bold()
                Button {
                    path.append("LoginView") // <--- here
                    print("Login button was tapped")
                } label: {
                    Text("Login")
                        .padding()
                        .foregroundStyle(.white)
                        .frame(height: 60)
                        .frame(maxWidth: .infinity)
                        .background(.blue)
                }

                Button {
                    path.append("Registration")  // <--- here
                    print("Registration button was tapped")
                } label: {
                    Text("Registration")
                        .padding()
                        .foregroundStyle(.white)
                        .frame(height: 60)
                        .frame(maxWidth: .infinity)
                        .background(.blue)
                }
            }
            // --- here
            .navigationDestination(for: String.self) { destination in
                if destination == "LoginView" {
                    LoginView()
                } else {
                    RegistrationView()
                }
            }
            // --- here
            .toolbar {  
                ToolbarItem(placement: .navigationBarLeading) {
                    HStack {
                        Circle()
                            .fill(.blue)
                            .frame(width: 40, height: 40)
                        Text("SLOP")
                            .font(.system(size: 20))
                            .fontWeight(.medium)
                    }
                    .padding(.leading, 20)
                }
            }
        }
    }
}

 struct LoginView: View {
       var body: some View {
           Text("LoginView")
       }
   }

struct RegistrationView: View {
    var body: some View {
        Text("RegistrationView")
    }
}

EDIT-1

to navigate to LoginView and never go back to the MainView, use this:

struct LoginView: View {
    var body: some View {
        Text("LoginView")
            .navigationBarBackButtonHidden(true) // <--- here
    }
}