How to move Views in SwiftUI with Button Tap or add an action to NavigationLink?

Question

I know this question has been asked a million times already but I still can't find a good answer to it regardless.

Been working with SwiftUI (just starting) and used an existing code to includes Firebase registration/login by phone.

The flow is

1. Onboarding screen is shown (OnboardingStepView)
2. Phone input screen is show (LoginView)
3. Phone number verification is shown (VerificationView)
4. Capture more user data view is shown (RegisterView)
5. Go to home page (HomeView)

In my first view (ContentView) I have the following code:

    struct ContentView: View {
    @AppStorage("log_Status") var status = false

    @State private var onboardinDone = false
    var data = OnboardingDataModel.data
    var body: some View {
        
        ZStack{
            Group {
                if !onboardinDone {
                    OnboardingViewPure(data: data, doneFunction: {
                        status = true
                        self.onboardinDone = true
                        
                        print("done onboarding")
                    })
                
            } else {
                
                NavigationView{
                    
                    VStack{
                        
                        if status{Home()}
                        else{Login()}
                    }
                    .preferredColorScheme(.dark)
                    .navigationBarHidden(true)
                }
            }
        }
    }
}
}

Now, all the views are coded and work properly (with Firebase) and within previous Swift versions I would segue when a button was tapped. However, in SwiftUI that is not an option and you need to use navigation links now (that can look like a button).

As an example, in my "VerficationView" there is a button that performs an action.

Button(action: loginData.verifyCode) {

Now, after the button is tapped and data is verified in the background I want to move to the next view I created that registers a user's "name, bio, and image" (RegisterView). This view works and registers the user's data in Firebase. However, I don't know how to present this screen properly once the user clicks on the above mentioned button.

• Do I change the button to a navigation link and can I add the action to it?
• Do I use @State to set the state of view and "isActive" to track which is shown?
• Do I use a "Mother View" and that view always keeps track of which view is shown?

Please let me know your thoughts because I am stuck and not sure how to continue....

Thank you!

Answer 1

I would post this as a comment but I don't have enough reputation.

I solved a similar problem by showing the login screen as a .fullScreenCover. This takes it out of the normal navigation hierarchy so the ContentView is still the root view. Once login is done, change a Bool in ContentView via an @Binding. This will change the state of ContentView so now an ifelse can send the user to your first page.

.fullScreenCover(isPresented: $isPresented) {

EDIT:

Maybe there is no need for FullScreenCover just else if. See below.

struct ContentView: View {
    
    @State private var isOnboardinDone: Bool = false
    @State private var isLoggedIn: Bool = false
    
    var body: some View {
        if isOnboardinDone && isLoggedIn {
            FirstView()
        } else if !isOnboardinDone {
            OnboardingView(done: $isOnboardinDone)
        } else {
            LoginView(loggedIn: $isLoggedIn)
        }
        
    }
}

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

struct OnboardingView: View {
    @Binding var done: Bool
    var body: some View {
        Button(action: { done.toggle() }, label: {
            Text("On Boarding done.")
        })
    }
}

struct LoginView: View {
    @Binding var loggedIn: Bool
    var body: some View {
        Button(action: { loggedIn.toggle() }, label: {
            Text("Login")
        })
    }
}