Moving to Next View after Login Verification in SwiftUI iOS

Question

this is not a duplicate QUESTION....after reading many resources on net not able to figure out all resources points out to navigation link or if else with boolean to move to next view, which after applying dont work or not the requirement. Not able to find out a single project code or source code which clearly elaborate the basic working.

In Android(I have created some apps in the same with real live data) there is intent to move from one screen to another. Whats in SwiftUI ?

I have simple basic requirement like all other apps : user enters username password and on verification from API moves to home screen (saving user details is extra) how to do that I am able to pull data successfully(showing in console) but what next ? Can someone please point out to a good complete example. Please no bits of pieces.

Answer 1

In SwiftUI there are no intents like in Android, where you explicitly tell what navigation path the app should follow, and where to go.

SwiftUI uses rather a "conditional" way to show views: the view is either shown or it's not. Showing a view can be triggered by a boolean, an optional value, or other ways; the contents of a view can change similarly to how you change the contents of a fragment in Android.

So, you don't "move", but you trigger a condition and as a consequence the contents change. That's why you need to use another paradigm when coding with SwiftUI - which is quite powerful if you get the hang of how it works.

So, you might not like what I will propose below, but that's one way to deal with SwiftUI without using NavigationView or NavigationLink.

Check the comments in the code:

struct Example: View {
    
    // Variables that are also conditions for the SwiftUI views
    @State private var isLoginWindowOpen = false
    @State private var username = ""
    
    var body: some View {
        VStack {
            Text(username.isEmpty ? "User is logged off" : "Logged user is \(username)")
                .padding()
            
            // This button will trigger the conditions that drive the views
            Button {
                if username.isEmpty {
                    
                    // Changing this variable opens the sheet
                    isLoginWindowOpen.toggle()
                } else {
                    
                    // Changing this variable tells the UI to show different contents
                    username = ""
                }
            } label: {
                
                // Show different contents based on the username
                Text(username.isEmpty ? "Login" : "Logoff")
            }
            .buttonStyle(.borderedProminent)
            
            // Show the home page only if user is logged in
            if !username.isEmpty {
                VStack {
                    Text("Home page - Welcome!")
                        .font(.largeTitle)
                        .font(.body)
                        .padding()
                    Text("Thanks for joining us")
                }
            } else {
                Text("No home page without login, see this view instead")
                    .foregroundColor(.red)
            }
        
        }
        
        // Show the sheet based on the specific trigger
        .sheet(isPresented: $isLoginWindowOpen) {
            LoginPage(username: $username)
        }
    }
}

// This is the Login page, you can call it from any view you wish
struct LoginPage: View {
    @Environment(\.presentationMode) var presentationMode
    
    // Use bindings to change the variables in both views
    @Binding var username: String
    @State private var password = ""
    
    var body: some View {
        
        VStack {
            HStack {
                Text("Username")
                    .frame(width: 100)
                TextField("Username", text: $username)
                    .padding()
            }
            
            HStack {
                Text("Password")
                    .frame(width: 100)
                SecureField("Password", text: $password)
                    .padding()
            }
            
            Button {
                // Check if credentials match
                // if credentialsMatch {
                
                    // This command simply dismisses the view
                    presentationMode.wrappedValue.dismiss()
                // }
            } label: {
                Text("Login")
            }
            .buttonStyle(.bordered)
        }
        
    }
}