How to replace the current view in SwiftUI?

Question

I am developing an app with SwiftUI.

I have a NavigationView and I have buttons on the navigation bar. I want to replace the current view (which is a result of a TabView selection) with another one.

Basically, when the user clicks "Edit" button, I want to replace the view with another view to make the edition and when the user is done, the previous view is restored by clicking on a "Done" button.

I could just use a variable to dynamically choose which view is displayed on the current tab view, but I feel like this isn't the "right way to do" in SwiftUI. And this way I could not apply any transition visual effect.

Some code samples to explain what I am looking for.

private extension ContentView {
    @ViewBuilder
    var navigationBarLeadingItems: some View {
        if tabSelection == 3 {
            Button(action: {
                print("Edit pressed")
                // Here I want to replace the tabSelection 3 view by another view temporarly and update the navigation bar items
                }) {
                    Text("Edit")
            }
        }
    }
}

struct ContentView: View {    

    var body: some View {
        NavigationView {
            TabView(selection: $tabSelection) {
                ContactPage()
                    .tabItem {
                        Text("1")
                    }
                    .tag(1)
                Text("Chats")
                    .tabItem() {
                        Text("2")
                    }
                    .tag(2)
                SettingsView()
                    .tabItem {
                        Text("3")
                    }
                    .tag(3)
            }.navigationBarItems(leading: navigationBarLeadingItems)
        }
    }
}

Thank you

EDIT

I have a working version where I simply update a toggle variable in my button action that makes my view display one or another thing, it is working but I cannot apply any animation effect on it, and it doesn't look "right" in SwiftUI, I guess there is something better that I do not know.

pawello2222 pawello2222 · Accepted Answer · 2020-08-12T20:43:42

If you just want to add animations you can try:

struct ContentView: View {
    ...
    @State var showEditView = false

    var body: some View {
        NavigationView {
            TabView(selection: $tabSelection) {
                ...
                view3
                    .tabItem {
                        Text("3")
                    }
                    .tag(3)
            }
            .navigationBarItems(leading: navigationBarLeadingItems)
        }
    }
}

private extension ContentView {
    var view3: some View {
        VStack {
            if showEditView {
                FormView()
                    .background(Color.red)
                    .transition(.slide)
            } else {
                Text("View 3")
                    .background(Color.blue)
                    .transition(.slide)
            }
        }
    }
}

struct FormView: View {
    var body: some View {
        Form {
            Text("test")
        }
    }
}

A possible alternative is to use a ViewRouter: How To Navigate Between Views In SwiftUI By Using An @EnvironmentObject.

How to replace the current view in SwiftUI?

1 Answers