Dismiss Tab View from a Child Navigation View and go back to RootView SwiftUI

Question

My Navigation Flow:

Here, my View A to View G is under one Navigation View.

NavigationView {
    ViewA()
}

And from View D & View G I am moving to my TabView H by modal, like this:

Button(action: {
    isPresented.toggle()
}, label: {
   Text("GO!")
})
.fullScreenCover(isPresented: $isPresented) {
    TabbarView()
}

In my Tab View all the views have their own Navigation View, like this:

TabView(selection: $tabbarViewModel.tabSelection) {
    NavigationView {
        HomeView()
            .navigationBarTitleDisplayMode(.inline)
            .toolbar {
                ToolbarItem(placement: .principal) {
                    Text("Home")
                }
            }
    }.navigationViewStyle(StackNavigationViewStyle())
        .tabItem {
            Image(systemName: "house")
                .renderingMode(.template)
                .resizable()
                .aspectRatio(contentMode: .fit)
            Text("Home")
        }
        .tag(0)

    NavigationView {
        CartView()
            .navigationBarTitleDisplayMode(.inline)
            .toolbar {
                ToolbarItem(placement: .principal) {
                    Text("Cart")
                }
            }
    }.navigationViewStyle(StackNavigationViewStyle())
        .tabItem {
            Image(systemName: "cart")
                .renderingMode(.template)
                .resizable()
                .aspectRatio(contentMode: .fit)
            Text("Cart")
        }
        .tag(1)

    NavigationView {
        ProductView()
            .navigationBarTitleDisplayMode(.inline)
            .toolbar {
                ToolbarItem(placement: .principal) {
                    Text("Product")
                }
            }
    }.navigationViewStyle(StackNavigationViewStyle())
        .tabItem {
            Image(systemName: "seal")
                .renderingMode(.template)
                .resizable()
                .aspectRatio(contentMode: .fit)
            Text("Product")
        }
        .tag(2)

    NavigationView {
        ProfileView()
            .navigationBarTitleDisplayMode(.inline)
            .toolbar {
                ToolbarItem(placement: .principal) {
                    Text("Profile")
                }
            }
    }.navigationViewStyle(StackNavigationViewStyle())
        .tabItem {
            Image(systemName: "person")
                .renderingMode(.template)
                .resizable()
                .aspectRatio(contentMode: .fit)
            Text("Profile")
        }
        .tag(3)
}
.accentColor(Color("AppsDefaultColor"))

Now I want to go back to viewA, say from Home View by pressing the Sign Out button. I tried this, just to see if it takes me back to previous view, but it doesn't work.

struct HomeView: View {
    @Environment(\.presentationMode) var presentationMode
    
    var body: some View {
        Button(action: {
            self.presentationMode.wrappedValue.dismiss()
        }, label: {
            Text("Dismiss")
        })
    }
}

So how can I dismiss the tabview and go back to my Root view A?

This might be helpfull : https://stackoverflow.com/a/66314003/14733292 — Raja Kishan, Jul 07 '21 at 13:07

Tulon · Accepted Answer · 2021-07-11T06:49:49.950

Finally I have managed to achieve this. To roll back to the Root view I used this:

NavigationLink(destination: <#T##_#>, tag: <#T##Hashable#>, selection: <#T##Binding<Hashable?>#>, label: <#T##() -> _#>)

And to dismiss the presented view, I used this:

UIApplication.shared.windows.first?.rootViewController?.dismiss(animated: true, completion: nil)

To be honest it's quite simple. All we need to make NavigationLink selection which is selectedItem in this case to nil & dismiss the modal throughout the project. All of these have done inside of a tab bar view model class with the help of @EnvironmentObject

First create the TabbarViewModel: ObservableObject:

import Foundation
import SwiftUI

class TabbarViewModel: ObservableObject {
    @Published var tabSelection: Int = 0
    @Published var selectedItem: String? = nil
    
    func gotoRootView() {
        withAnimation {
            UIApplication.shared.windows.first?.rootViewController?.dismiss(animated: true, completion: nil)
            selectedItem = nil
        }
    }
}

Now, let's create the ViewA which is AuthListView:

import SwiftUI

struct CellItem: Identifiable {
    var id = UUID()
    let title: String
    let image: String
    let destination: AnyView
}

struct AuthListView: View {
    var body: some View {
        AuthListContentView()
            .navigationBarHidden(true)
    }
}

struct AuthListContentView: View {
    @State private var cellList: [CellItem] = [
        CellItem(title: "Icon", image: "", destination: AnyView(EmptyView())),
        CellItem(title: "Phone", image: "Phone", destination: AnyView(PhoneView())),
        CellItem(title: "Email", image: "Email", destination: AnyView(SignInView())),
        CellItem(title: "Google", image: "Google", destination: AnyView(GoogleView())),
        CellItem(title: "Facebook", image: "Facebook", destination: AnyView(FacebookView())),
        CellItem(title: "Twitter", image: "Twitter", destination: AnyView(TwitterView()))]
    
    var body: some View {
        List(cellList, id: \.id) { item in
            if item.title == "Icon" {
                IconImageView()
            } else {
                AuthListCell(cellItem: item)
            }
        }
    }
}

struct IconImageView: View {
    var body: some View {
        VStack {
            Image("firebase")
                .renderingMode(.original)
                .resizable()
                .aspectRatio(contentMode: .fit)
                .frame(width: 120, height: 120, alignment: .center)
        }
        .frame(maxWidth: .infinity, minHeight: 120, alignment: .center)
        .padding(.top, 50)
        .padding(.bottom, 50)
    }
}

This is each cell of auth View:

import SwiftUI

struct AuthListCell: View {
    var cellItem: CellItem
    @EnvironmentObject var tabbarViewModel: TabbarViewModel
    
    var body: some View {
        
        NavigationLink(
            destination: cellItem.destination,
            tag: cellItem.title,
            selection: $tabbarViewModel.selectedItem) {
            cell(cellItem: cellItem)
        }
    }
}

struct cell: View {
    var cellItem: CellItem
    var body: some View {
        HStack(spacing: 15) {
            Image(cellItem.image)
                .renderingMode(.original)
                .resizable()
                .aspectRatio(contentMode: .fit)
                .frame(maxWidth: 28, maxHeight: .infinity, alignment: .center)

            Text(cellItem.title)
                .foregroundColor(Color("DefaultText"))
                .font(.system(size: 17))
            Spacer()
        }
        .padding(.top, 5)
        .padding(.bottom, 5)
    }
}

Load this view inside of your ContentView under a Navigation View:

struct ContentView: View {
    @Environment(\.managedObjectContext) private var viewContext

    var body: some View {
        NavigationView {
            AuthListView()
        }
        .navigationViewStyle(StackNavigationViewStyle())
    }
}

Till now, we can push to ViewB from ViewA. Here, I am only showing the navigation flow for ViewA push> ViewB push> ViewC present> TabView > and then Dismiss TabView from HomeView and go back to root ViewA, cause rest of the other views will follow the same. It also works from a child navigation of any Tab bar views as well. So let's create ViewB(PhoneView) and push toViewC(PINView):

ViewB:

struct PhoneView: View {
    var body: some View {
        PhoneContentView()
            .navigationBarTitle("Phone Number", displayMode: .inline)
    }
}

struct PhoneContentView: View {
    var body: some View {
        NavigationLink(destination: PINView()) {
            Text("Go")
        }
    }
}

ViewC:

struct PINView: View {
    var body: some View {
        PINContentView()
            .navigationBarTitle("PIN", displayMode: .inline)
    }
}

struct PINContentView: View {
    @State private var isPresented = false
    
    var body: some View {
        Button(action: {
            isPresented.toggle()
        }, label: {
            Text("Sign In")
        })
        .fullScreenCover(isPresented: $isPresented) {
            TabbarView()
        }
    }
}

Till now we have presented the tab view from previous ViewC. This is our tab view:

import SwiftUI

struct TabbarView: View {
    @EnvironmentObject var tabbarViewModel: TabbarViewModel

    var body: some View {
        TabView(selection: $tabbarViewModel.tabSelection) {
            NavigationView {
                HomeView().navigationBarTitle("Home", displayMode: .inline)
            }
            .navigationViewStyle(StackNavigationViewStyle())
            .tabItem {
                Image(systemName: "house")
                    .renderingMode(.template)
                    .resizable()
                    .aspectRatio(contentMode: .fit)
                Text("Home")
            }
            .tag(0)

            NavigationView {
                CartView().navigationBarTitle("Cart", displayMode: .inline)
            }
            .navigationViewStyle(StackNavigationViewStyle())
            .tabItem {
                Image(systemName: "cart")
                    .renderingMode(.template)
                    .resizable()
                    .aspectRatio(contentMode: .fit)
                Text("Cart")
            }
            .tag(1)

            NavigationView {
                ProductView().navigationBarTitle("Product", displayMode: .inline)
            }
            .navigationViewStyle(StackNavigationViewStyle())
            .tabItem {
                Image("product")
                    .renderingMode(.template)
                    .resizable()
                    .aspectRatio(contentMode: .fit)
                Text("Product")
            }
            .tag(2)
            
            NavigationView {
                ProfileView().navigationBarTitle("Profile", displayMode: .inline)
            }
            .navigationViewStyle(StackNavigationViewStyle())
            .tabItem {
                Image(systemName: "person")
                    .renderingMode(.template)
                    .resizable()
                    .aspectRatio(contentMode: .fit)
                Text("Profile")
            }
            .tag(3)
        }
        .accentColor(Color("AppsDefaultColor"))
    }
}

Now, If I want to dismiss the presented tab view & go back to root view by pressing sign out button from my HomeView, all I have to do is call tabbarViewModel.gotoRootView() like this:

struct HomeView: View {
    @EnvironmentObject var tabbarViewModel: TabbarViewModel
    
    var body: some View {
        Button(action: {
            tabbarViewModel.gotoRootView()
        }, label: {
            Text("Sign Out")
        })
    }
}

I can dismiss the tab view and go to the root view from a child view of my HomeView as well. Let's go to a child view from the HomeView:

struct HomeView: View {
    
    var body: some View {
        NavigationLink(destination: HomeDetailsView()) {
            Text("Go")
        }
    }
}

This is the HomedetailsView` and by following the same call I can accomplish the same result like this:

struct HomeDetailsView: View {
    var body: some View {
        HomeDetailsContentView()
        .navigationBarTitle("Home Details", displayMode: .inline)
    }
}

struct HomeDetailsContentView: View {
    @EnvironmentObject var tabbarViewModel: TabbarViewModel
    
    var body: some View {
        Button(action: {
            tabbarViewModel.gotoRootView()
        }, label: {
            Text("Dismiss")
        })
    }
}

By this you can dismiss tab view and go to the root view from any view of your project. :)

Dismiss Tab View from a Child Navigation View and go back to RootView SwiftUI

1 Answers1