buttonswiftuitextswiftui-navigationlinkmodifier

Navigate one view to another in swiftUI


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...

enter image description here


Solution

  • 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
        }
    }