Chuck H
Chuck H

Reputation: 8266

How can I pop to the Root view using SwiftUI?

Finally now with Beta 5 we can programmatically pop to a parent View. However, there are several places in my app where a view has a "Save" button that concludes a several step process and returns to the beginning. In UIKit, I use popToRootViewController(), but I have been unable to figure out a way to do the same in SwiftUI.

Below is a simple example of the pattern I'm trying to achieve.

How can I do it?

import SwiftUI

struct DetailViewB: View {
    @Environment(\.presentationMode) var presentationMode: Binding<PresentationMode>
    var body: some View {
        VStack {
            Text("This is Detail View B.")

            Button(action: { self.presentationMode.value.dismiss() } )
            { Text("Pop to Detail View A.") }

            Button(action: { /* How to do equivalent to popToRootViewController() here?? */ } )
            { Text("Pop two levels to Master View.") }

        }
    }
}

struct DetailViewA: View {
    @Environment(\.presentationMode) var presentationMode: Binding<PresentationMode>
    var body: some View {
        VStack {
            Text("This is Detail View A.")

            NavigationLink(destination: DetailViewB() )
            { Text("Push to Detail View B.") }

            Button(action: { self.presentationMode.value.dismiss() } )
            { Text("Pop one level to Master.") }
        }
    }
}

struct MasterView: View {
    var body: some View {
        VStack {
            Text("This is Master View.")

            NavigationLink(destination: DetailViewA() )
            { Text("Push to Detail View A.") }
        }
    }
}

struct ContentView: View {
    var body: some View {
        NavigationView {
            MasterView()
        }
    }
}

Upvotes: 201

Views: 111383

Answers (30)

mikail yusuf
mikail yusuf

Reputation: 337

For me, this worked

guard let firstScene = UIApplication.shared.connectedScenes.first as? UIWindowScene else {
  return
}
guard let firstWindow = firstScene.windows.first else {
  return
}
firstWindow.rootViewController = UIHostingController(rootView: YourSwiftUIRootView())
firstWindow.makeKeyAndVisible()

Upvotes: 0

Badr Bujbara
Badr Bujbara

Reputation: 8671

iOS 17 solution:

1- Create an observable view model with a boolean for presenting the destination view

@Observable
class OrderViewModel {
    var desertsViewIsActive = false
}

2- In the parent view:

  • Add a button to change viewModel.desertsViewIsActive to true.

  • Add .navigationDestination at the end to perform the navigation.

  • Add the view model to the environment of the destination.

    struct OrderView: View {

    @State var viewModel = OrderViewModel()

    var body: some View {

     VStack() {
    
         Button {
             viewModel.desertsViewIsActive = true
         } label: {
             Text("Select a Desert")
         }
    
     }
     .navigationDestination(isPresented: $viewModel.desertsViewIsActive, destination: {
         DesertsView()
             .environment(viewModel)
     })
    

    }

3- In the DesertsView,

  • Add an environment property to get the OrderViewModel.
  • Add a button to set viewModel.desertsViewIsActive to false when you're done.
struct DesertsView: View {
@Environment(OrderViewModel.self) var orderViewModel
var body: some View {
    Button("Done"){
        orderViewModel.desertsViewIsActive = false
    }
}

}

Upvotes: 0

malhal
malhal

Reputation: 30549

iOS 16 Update: NavigationPath was added to make this easier. Use with the new NavigationStack that also fixes a lot of bugs.

Setting the view modifier isDetailLink to false on a NavigationLink is the key to getting pop-to-root to work. isDetailLink is true by default and is adaptive to the containing View. On iPad landscape for example, a Split view is separated and isDetailLink ensures the destination view will be shown on the right-hand side. Setting isDetailLink to false consequently means that the destination view will always be pushed onto the navigation stack; thus can always be popped off.

Along with setting isDetailLink to false on NavigationLink, pass the isActive binding to each subsequent destination view. At last when you want to pop to the root view, set the value to false and it will automatically pop everything off:

import SwiftUI

struct ContentView: View {
    @State var isActive : Bool = false

    var body: some View {
        NavigationView {
            NavigationLink(
                destination: ContentView2(rootIsActive: self.$isActive),
                isActive: self.$isActive
            ) {
                Text("Hello, World!")
            }
            .isDetailLink(false)
            .navigationBarTitle("Root")
        }
    }
}

struct ContentView2: View {
    @Binding var rootIsActive : Bool

    var body: some View {
        NavigationLink(destination: ContentView3(shouldPopToRootView: self.$rootIsActive)) {
            Text("Hello, World #2!")
        }
        .isDetailLink(false)
        .navigationBarTitle("Two")
    }
}

struct ContentView3: View {
    @Binding var shouldPopToRootView : Bool

    var body: some View {
        VStack {
            Text("Hello, World #3!")
            Button (action: { self.shouldPopToRootView = false } ){
                Text("Pop to root")
            }
        }.navigationBarTitle("Three")
    }
}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}

Screen capture

Upvotes: 261

Mahi Al Jawad
Mahi Al Jawad

Reputation: 992

Though there are many working answers available. But I'd like to suggest a cleaner approach for Navigation with SwiftUI.

You can simply add the Router to control all types of navigation in your App. It will create cleaner and more manageable routing inside your app.

With a router: Router you can pop back to root with just one line of code (Which is your main answer to the question):

router.navigateToRoot()

First, make the following Router inside your App:

import SwiftUI
import Combine

final class Router: ObservableObject {
    // Add the views you need to control
    public enum Destination: Codable, Hashable {
        case masterView
        case detailViewA
        case detailViewB
    }
    
    @Published var path = NavigationPath()
    
    func navigate(to destination: Destination) {
        path.append(destination)
    }
    
    func navigateBack() {
        path.removeLast()
    }
    
    func navigateToRoot() {
        path.removeLast(path.count)
    }
}

You are done. Now you need to use the router to navigate inside your views:

import SwiftUI
import Combine

struct DetailViewB: View {
    @EnvironmentObject var router: Router
    
    var body: some View {
        VStack {
            Text("This is Detail View B.")
            
            Button(action: {
                router.navigateBack()
            } ) {
                Text("Pop to Detail View A.")
            }
            
            Button(action: {
                // MARK: Your answer
                router.navigateToRoot()
            }) {
                Text("Pop two levels to Master View (Root)")
            }
        }
        .navigationTitle("DetailView B")
    }
}

struct DetailViewA: View {
    @EnvironmentObject var router: Router
    
    var body: some View {
        VStack {
            Text("This is Detail View A.")
            
            NavigationLink(value: Router.Destination.detailViewB) {
                Text("Push to Detail View B.")
            }
            
            // You can do the following instead of NavigationLink
            /*
            Button("Push to Detail View B") {
                router.navigate(to: .detailViewB)
            }
             */
            
            Button(action: {
                router.navigateBack()
            }) {
                Text("Pop one level to Master.")
            }
        }
        .navigationTitle("DetailView A")
    }
}

struct MasterView: View {
    var body: some View {
        VStack {
            Text("This is Master View.")
            
            NavigationLink(value: Router.Destination.detailViewA) {
                Text("Push to Detail View A.")
            }
        }
        .navigationTitle("Master View")
    }
}

struct ContentView: View {
    @ObservedObject var router = Router()
    
    var body: some View {
        NavigationStack(path: $router.path) {
            MasterView()
                .navigationDestination(for: Router.Destination.self) { destination in
                    switch destination {
                    case .detailViewA: DetailViewA()
                    case .detailViewB: DetailViewB()
                    case .masterView: MasterView()
                    }
                }
        }
        .environmentObject(router)
    }
}

Upvotes: 6

x0randgat3
x0randgat3

Reputation: 621

Since currently SwiftUI still uses a UINavigationController in the background it is also possible to call its popToRootViewController(animated:) function. You only have to search the view controller hierarchy for the UINavigationController like this:

struct NavigationUtil {
    static func popToRootView(animated: Bool = false) {
        findNavigationController(viewController: UIApplication.shared.connectedScenes.flatMap { ($0 as? UIWindowScene)?.windows ?? [] }.first { $0.isKeyWindow }?.rootViewController)?.popToRootViewController(animated: animated)
    }
    
    static func findNavigationController(viewController: UIViewController?) -> UINavigationController? {
        guard let viewController = viewController else {
            return nil
        }
        
        if let navigationController = viewController as? UITabBarController {
            return findNavigationController(viewController: navigationController.selectedViewController)
        }
        
        if let navigationController = viewController as? UINavigationController {
            return navigationController
        }
        
        for childViewController in viewController.children {
            return findNavigationController(viewController: childViewController)
        }
        
        return nil
    }
}

And use it like this:

struct ContentView: View {
    var body: some View {
      NavigationView { DummyView(number: 1) }
    }
}

struct DummyView: View {
  let number: Int

  var body: some View {
    VStack(spacing: 10) {
      Text("This is view \(number)")
      NavigationLink(destination: DummyView(number: number + 1)) {
        Text("Go to view \(number + 1)")
      }
      Button(action: { NavigationUtil.popToRootView() }) {
        Text("Or go to root view!")
      }
    }
  }
}

Upvotes: 52

marceltex
marceltex

Reputation: 91

This is an update to x0randgat3's answer that works for multiple NavigationViews within a TabView.

struct NavigationUtil {
    static func popToRootView(animated: Bool = false) {
        findNavigationController(viewController: UIApplication.shared.connectedScenes.flatMap { ($0 as? UIWindowScene)?.windows ?? [] }.first { $0.isKeyWindow }?.rootViewController)?.popToRootViewController(animated: animated)
    }
    
    static func findNavigationController(viewController: UIViewController?) -> UINavigationController? {
        guard let viewController = viewController else {
            return nil
        }
        
        if let navigationController = viewController as? UITabBarController {
            return findNavigationController(viewController: navigationController.selectedViewController)
        }
        
        if let navigationController = viewController as? UINavigationController {
            return navigationController
        }
        
        for childViewController in viewController.children {
            return findNavigationController(viewController: childViewController)
        }
        
        return nil
    }
}

Upvotes: 9

micah
micah

Reputation: 1218

IOS 16 Solution

Now finally you can pop to the root view with the newly added NavigationStack!!!

struct DataObject: Identifiable, Hashable {
    let id = UUID()
    let name: String
}

@available(iOS 16.0, *)
struct ContentView8: View {
    @State private var path = NavigationPath()
    
    var body: some View {
        NavigationStack(path: $path) {
            Text("Root Pop")
                .font(.largeTitle)
                .foregroundColor(.primary)
            
            NavigationLink("Click Item", value: DataObject.init(name: "Item"))
            
            .listStyle(.plain)
            .navigationDestination(for: DataObject.self) { course in
                Text(course.name)
                NavigationLink("Go Deeper", value: DataObject.init(name: "Item"))
                Button("Back to root") {
                    path = NavigationPath()
                }
            }
        }
        .padding()
    }
}

Upvotes: 16

JC Dev
JC Dev

Reputation: 26

The answer from @malhal really helped out, but in my situation I needed functionality when each button was pressed before navigating. If you are in that same boat try this code out!

//  ContentView.swift
//  Navigation View Buttons
//
//  Created by Jarren Campos on 9/10/22.
//

import SwiftUI

struct ContentView: View {

    var body: some View{
        VStack{
            ContentView1()
        }
    }
}

struct ContentView1: View {
    @State var isActive : Bool = false

    var body: some View {
        NavigationView {
            VStack{
                Button {
                    isActive = true
                } label: {
                    Text("To 2")
                }
            }
            .background{
                NavigationLink(
                    destination: ContentView2(rootIsActive: self.$isActive),
                    isActive: self.$isActive) {}
                    .isDetailLink(false)
            }
            .navigationBarTitle("One")
        }
    }
}

struct ContentView2: View {
    @Binding var rootIsActive : Bool
    @State var toThirdView: Bool = false

    var body: some View {

        VStack{
            Button {
                toThirdView = true
            } label: {
                Text("to 3")
            }
        }
        .background{
            NavigationLink(isActive: $toThirdView) {
                ContentView3(shouldPopToRootView: self.$rootIsActive)
            } label: {}
                .isDetailLink(false)
        }
        .navigationBarTitle("Two")

    }
}

struct ContentView3: View {
    @Binding var shouldPopToRootView : Bool

    var body: some View {
        VStack {
            Text("Hello, World #3!")
            Button {
                self.shouldPopToRootView = false
            } label: {
                Text("Pop to root")
            }
        }
        .navigationBarTitle("Three")
    }
}

Upvotes: 1

I created a solution that "just works" and am very happy with it. To use my magic solutions, there are only a few steps you have to do.

It starts out with using rootPresentationMode that's used elsewhere in this thread. Add this code:

// Create a custom environment key
struct RootPresentationModeKey: EnvironmentKey {
    static let defaultValue: Binding<RootPresentationMode> = .constant(RootPresentationMode())
}

extension EnvironmentValues {
    var rootPresentationMode: Binding<RootPresentationMode> {
        get { self[RootPresentationModeKey.self] }
        set { self[RootPresentationModeKey.self] = newValue }
    }
}

typealias RootPresentationMode = Bool

extension RootPresentationMode: Equatable {
    mutating func dismiss() {
        toggle()
    }
}

Next comes the magic. It has two steps.

  1. Create a view modifier that monitors changes to the rootPresentationMode variable.

    struct WithRoot: ViewModifier {
        @Environment(\.rootPresentationMode) private var rootPresentationMode
        @Binding var rootBinding: Bool
    
        func body(content: Content) -> some View {
            content
                .onChange(of: rootBinding) { newValue in
                    // We only care if it's set to true
                    if newValue {
                        rootPresentationMode.wrappedValue = true
                    }
                }
                .onChange(of: rootPresentationMode.wrappedValue) { newValue in
                    // We only care if it's set to false
                    if !newValue {
                        rootBinding = false
                    }
                }
        }
    }
    
    extension View {
        func withRoot(rootBinding: Binding<Bool>) -> some View {
            modifier(WithRoot(rootBinding: rootBinding))
        }
    }
    
  2. Add an isPresented to all NavigationViews

    struct ContentView: View {
        // This seems.. unimportant, but it's crucial. This variable
        // lets us pop back to the root view from anywhere by adding
        // a withRoot() modifier
        // It's only used indirectly by the withRoot() modifier.
        @State private var isPresented = false
    
        var body: some View {
            NavigationView {
                MyMoneyMakingApp()
            }
            // rootPresentationMode MUST be set on a NavigationView to be
            // accessible from everywhere
            .environment(\.rootPresentationMode, $isPresented)
        }
    

To use it in (any) subviews, all you have to do is

struct MyMoneyMakingApp: View {
    @State private var isActive = false

    var body: some View {
        VStack {
            NavigationLink(destination: ADeepDeepLink(), isActive: $isActive) {
                Text("go deep")
            }
        }
        .withRoot(rootBinding: $isActive)
    }
}

struct ADeepDeepLink: View {
    @Environment(\.rootPresentationMode) private var rootPresentationMode

    var body: some View {
        VStack {
            NavigationLink(destination: ADeepDeepLink()) {
                Text("go deeper")
            }
            Button(action: {
                rootPresentationMode.wrappedValue.dismiss()
            }) {
                Text("pop to root")
            }
        }
    }
}

Upvotes: 0

jimmy0251
jimmy0251

Reputation: 16463

It's very hard to achieve with NavigationView and NavigationLink. However, if you are using the UIPilot library, which a tiny wrapper around NavigationView, popping to any destination is very straightforward.

Suppose you have routes,

enum AppRoute: Equatable {
    case Home
    case Detail
    case NestedDetail
}

and you have setup root view like below

struct ContentView: View {
    @StateObject var pilot = UIPilot(initial: AppRoute.Home)

    var body: some View {
        UIPilotHost(pilot)  { route in
            switch route {
                case .Home: return AnyView(HomeView())
                case .Detail: return AnyView(DetailView())
                case .NestedDetail: return AnyView(NestedDetail())
            }
        }
    }
}

And you want to pop to Home from the NestedDetail screen. Just use the popTo function.

struct NestedDetail: View {
    @EnvironmentObject var pilot: UIPilot<AppRoute>

    var body: some View {
        VStack {
            Button("Go to home", action: {
                pilot.popTo(.Home)   // Pop to home
            })
        }.navigationTitle("Nested detail")
    }
}

Upvotes: 2

LN-12
LN-12

Reputation: 1039

I did not find a solution in SwiftUI yet, but I found the library CleanUI.

Using the CUNavigation class, I can achieve exactly the navigation pattern I wanted.

An example from the library's README:

NavigationView {
    Button(action: {
      CUNavigation.pushToSwiftUiView(YOUR_VIEW_HERE)
    }){
      Text("Push To SwiftUI View")
    }

    Button(action: {
      CUNavigation.popToRootView()
    }){
      Text("Pop to the Root View")
    }

    Button(action: {
      CUNavigation.pushBottomSheet(YOUR_VIEW_HERE)
    }){
      Text("Push to a Botton-Sheet")
    }
}

Upvotes: 1

igdev
igdev

Reputation: 351

At first, I was using the solution from the Chuck H that was posted here.

But I was faced with an issue when this solution didn't work in my case. It was connected to the case when the root view is a start point for two or more flows and at some point of these flows the user has the ability to do the pop to root. And in this case this solution didn't work because it has the one common state @Environment(\.rootPresentationMode) private var rootPresentationMode

I made the RouteManager with the additional enum Route which describes some specific flow where the user has the ability to do the pop to root

RouteManager:

final class RouteManager: ObservableObject {
    @Published
    private var routers: [Int: Route] = [:]

    subscript(for route: Route) -> Route? {
        get {
            routers[route.rawValue]
        }
        set {
            routers[route.rawValue] = route
        }
    }

    func select(_ route: Route) {
        routers[route.rawValue] = route
    }

    func unselect(_ route: Route) {
        routers[route.rawValue] = nil
    }
}

Route:

enum Route: Int, Hashable {
    case signUp
    case restorePassword
    case orderDetails
}

Usage:

struct ContentView: View {
    @EnvironmentObject
    var routeManager: RouteManager

    var body: some View {
        NavigationView {
            VStack {
                NavigationLink(
                    destination: SignUp(),
                    tag: .signUp,
                    selection: $routeManager[for: .signUp]
                ) { EmptyView() }.isDetailLink(false)
                NavigationLink(
                    destination: RestorePassword(),
                    tag: .restorePassword,
                    selection: $routeManager[for: .restorePassword]
                ) { EmptyView() }.isDetailLink(false)
                Button("Sign Up") {
                    routeManager.select(.signUp)
                }
                Button("Restore Password") {
                    routeManager.select(.restorePassword)
                }
            }
            .navigationBarTitle("Navigation")
            .onAppear {
                routeManager.unselect(.signUp)
                routeManager.unselect(.restorePassword)
            }
        }.navigationViewStyle(StackNavigationViewStyle())
    }
}

!! IMPORTANT !!

You should use the unselect method of the RouteManager when the user goes forward to the flow and then goes back by tapping on the back button. In this case, need to reset the state of our route manager for the previously selected flows to avoid undefined (unexpected) behavior:

.onAppear {
    routeManager.unselect(.signUp)
    routeManager.unselect(.restorePassword)
}

Demo

You can find a full demo project here.

Upvotes: 2

Jensie
Jensie

Reputation: 781

malhal's answer is definitely the proper one. I made a wrapper to NavigationLink that allows me to apply any modifiers I need besides the isDetailLink(false) one and capture whatever data I need.

Specifically, it captures the isActive binding or the tag binding so that I can reset those when I want to pop to whatever view declared itself the root.

Setting isRoot = true will store the binding for that view, and the dismiss parameter takes an optional closure in case you need something done when the pop happens.

I copied the basic signatures from the SwiftUI NavigationLinks initializers for simple boolean or tag based navigation so that it is easy to edit existing usages. It should be straightforward to add others if needed.

The wrapper looks like this:

struct NavigationStackLink<Label, Destination> : View where Label : View, Destination : View {
    var isActive: Binding<Bool>? // Optionality implies whether tag or Bool binding is used
    var isRoot: Bool = false
    let link: NavigationLink<Label, Destination>

    private var dismisser: () -> Void = {}

    /// Wraps [NavigationLink](https://developer.apple.com/documentation/swiftui/navigationlink/init(isactive:destination:label:))
    /// `init(isActive: Binding<Bool>, destination: () -> Destination, label: () -> Label)`
    /// - Parameters:
    ///     - isActive:  A Boolean binding controlling the presentation state of the destination
    ///     - isRoot: Indicate if this is the root view. Used to pop to root level. Default `false`
    ///     - dismiss: A closure that is called when the link destination is about to be dismissed
    ///     - destination: The link destination view
    ///     - label: The links label
    init(isActive: Binding<Bool>, isRoot : Bool = false, dismiss: @escaping () -> Void = {}, @ViewBuilder destination: @escaping () -> Destination, @ViewBuilder label: @escaping () -> Label) {
        self.isActive = isActive
        self.isRoot = isRoot
        self.link = NavigationLink(isActive: isActive, destination: destination, label: label)
        self.dismisser = dismiss
    }

    /// Wraps [NavigationLink ](https://developer.apple.com/documentation/swiftui/navigationlink/init(tag:selection:destination:label:))
    init<V>(tag: V, selection: Binding<V?>, isRoot : Bool = false, dismiss: @escaping () -> Void = {}, @ViewBuilder destination: @escaping () -> Destination, @ViewBuilder label: @escaping () -> Label) where V : Hashable
    {
        self.isRoot = isRoot
        self.link = NavigationLink(tag: tag, selection: selection, destination: destination, label: label)
        self.dismisser = dismiss
        self.isActive = Binding (get: {
            selection.wrappedValue == tag
        }, set: { newValue in
            if newValue {
              selection.wrappedValue = tag
            } else {
              selection.wrappedValue = nil
            }
        })
    }

    // Make sure you inject your external store into your view hierarchy
    @EnvironmentObject var viewRouter: ViewRouter
    var body: some View {
        // Store whatever you need to in your external object
        if isRoot {
            viewRouter.root = isActive
        }
        viewRouter.dismissals.append(self.dismisser)
        // Return the link with whatever modification you need
        return link
            .isDetailLink(false)
    }
}

The ViewRouter can be whatever you need. I used an ObservableObject with the intent to eventually add some Published values for more complex stack manipulation in the future:

class ViewRouter: ObservableObject {

    var root: Binding<Bool>?
    typealias Dismiss = () -> Void
    var dismissals : [Dismiss] = []

    func popToRoot() {
        dismissals.forEach { dismiss in
            dismiss()
        }
        dismissals = []
        root?.wrappedValue = false
    }
}

Upvotes: 1

david
david

Reputation: 41

There is a simple solution in iOS 15 for that by using dismiss() and passing dismiss to the subview:

struct ContentView: View {
    @State private var showingSheet = false
    var body: some View {
        NavigationView {
            Button("show sheet", action: { showingSheet.toggle()})
                .navigationTitle("ContentView")
        }.sheet(isPresented: $showingSheet) { FirstSheetView() }
    }
}

struct FirstSheetView: View {
    @Environment(\.dismiss) var dismiss
    var body: some View {
        NavigationView {
            List {
                NavigationLink(destination: SecondSheetView(dismiss: _dismiss)) {
                    Text("show 2nd Sheet view")
                }
                NavigationLink(destination: ThirdSheetView(dismiss: _dismiss)) {
                    Text("show 3rd Sheet view")
                }
                Button("cancel", action: {dismiss()})
            } .navigationTitle("1. SheetView")
        }
    }
}

struct SecondSheetView: View {
    @Environment(\.dismiss) var dismiss
    var body: some View {
        List {
            NavigationLink(destination: ThirdSheetView(dismiss: _dismiss)) {
                Text("show 3rd SheetView")
            }
            Button("cancel", action: {dismiss()})
        } .navigationTitle("2. SheetView")
    }
}

struct ThirdSheetView: View {
    @Environment(\.dismiss) var dismiss
    var body: some View {
        List {
            Button("cancel", action: {dismiss()})
        } .navigationTitle("3. SheetView")
    }
}

Upvotes: 4

Fatbobman
Fatbobman

Reputation: 372

NavigationViewKit

import NavigationViewKit
NavigationView {
    List(0..<10) { _ in
        NavigationLink("abc", destination: DetailView())
    }
}
.navigationViewManager(for: "nv1", afterBackDo: {print("back to root") })

In any view in NavigationView:

@Environment(\.navigationManager) var nvmanager

Button("back to root view") {
    nvmanager.wrappedValue.popToRoot(tag:"nv1") {
        print("other back")
    }
}

You can also call it through NotificationCenter without calling it in the view

let backToRootItem = NavigationViewManager.BackToRootItem(tag: "nv1", animated: false, action: {})
NotificationCenter.default.post(name: .NavigationViewManagerBackToRoot, object: backToRootItem)

Upvotes: 3

Sherman
Sherman

Reputation: 21

I found a solution that works fine for me. Here is how it works:

A GIF image shows how it works

In the ContentView.swift file:

  1. define a RootSelection class, declare an @EnvironmentObject of RootSelection to record the tag of the current active NavigationLink only in root view.
  2. add a modifier .isDetailLink(false) to each NavigationLink that is not a final detail view.
  3. use a file system hierarchy to simulate the NavigationView.
  4. this solution works fine when the root view has multiple NavigationLink.
import SwiftUI

struct ContentView: View {
    var body: some View {
        NavigationView {
            SubView(folder: rootFolder)
        }
    }
}

struct SubView: View {
    @EnvironmentObject var rootSelection: RootSelection
    var folder: Folder

    var body: some View {
        List(self.folder.documents) { item in
            if self.folder.documents.count == 0 {
                Text("empty folder")
            } else {
                if self.folder.id == rootFolder.id {
                    NavigationLink(item.name, destination: SubView(folder: item as! Folder), tag: item.id, selection: self.$rootSelection.tag)
                        .isDetailLink(false)
                } else {
                    NavigationLink(item.name, destination: SubView(folder: item as! Folder))
                        .isDetailLink(false)
                }
            }
        }
        .navigationBarTitle(self.folder.name, displayMode: .large)
        .listStyle(SidebarListStyle())
        .overlay(
            Button(action: {
                rootSelection.tag = nil
            }, label: {
                Text("back to root")
            })
            .disabled(self.folder.id == rootFolder.id)
        )
    }
}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
            .environmentObject(RootSelection())
    }
}

class RootSelection: ObservableObject {
    @Published var tag: UUID? = nil
}

class Document: Identifiable {
    let id = UUID()
    var name: String

    init(name: String) {
        self.name = name
    }
}

class File: Document {}

class Folder: Document {
    var documents: [Document]

    init(name: String, documents: [Document]) {
        self.documents = documents
        super.init(name: name)
    }
}

let rootFolder = Folder(name: "root", documents: [
    Folder(name: "folder1", documents: [
        Folder(name: "folder1.1", documents: []),
        Folder(name: "folder1.2", documents: []),
    ]),
    Folder(name: "folder2", documents: [
        Folder(name: "folder2.1", documents: []),
        Folder(name: "folder2.2", documents: []),
    ])
])

.environmentObject(RootSelection()) is required for the ContentView() object in xxxApp.swift files.

import SwiftUI

@main
struct DraftApp: App {
    var body: some Scene {
        WindowGroup {
            ContentView()
                .environmentObject(RootSelection())
        }
    }
}

Upvotes: 2

Tomasen
Tomasen

Reputation: 312

Here is my solution. IT works anywhere, without dependency.

let window = UIApplication.shared.connectedScenes
  .filter { $0.activationState == .foregroundActive }
  .map { $0 as? UIWindowScene }
  .compactMap { $0 }
  .first?.windows
  .filter { $0.isKeyWindow }
  .first
let nvc = window?.rootViewController?.children.first as? UINavigationController
nvc?.popToRootViewController(animated: true)

Upvotes: 4

user3590685
user3590685

Reputation: 27

It is easier to present and dismiss a modal view controller that includes a NavigationView. Setting the modal view controller to fullscreen and later dismissing it gives the same effect as a stack of navigation views that pop to root.

See e.g. How to present a full screen modal view using fullScreenCover().

Upvotes: -2

Gustavo Toranzo Lorca
Gustavo Toranzo Lorca

Reputation: 119

I figured out a simple solution to pop to the root view. I am sending a notification and then listening for the notification to change the id of the NavigationView; this will refresh the NavigationView. There is not an animation, but it looks good. Here is the example:

@main
struct SampleApp: App {
    @State private var navigationId = UUID()

    var body: some Scene {
        WindowGroup {
            NavigationView {
                Screen1()
            }
            .id(navigationId)
            .onReceive(NotificationCenter.default.publisher(for: Notification.Name("popToRootView"))) { output in
                navigationId = UUID()
            }
        }
    }
}

struct Screen1: View {
    var body: some View {
        VStack {
            Text("This is screen 1")
            NavigationLink("Show Screen 2", destination: Screen2())
        }
    }
}

struct Screen2: View {
    var body: some View {
        VStack {
            Text("This is screen 2")
            Button("Go to Home") {
                NotificationCenter.default.post(name: Notification.Name("popToRootView"), object: nil)
            }
        }
    }
}

Upvotes: 10

Here's a generic approach for complex navigation which combines many approaches described here. This pattern is useful if you have many flows which need to pop back to the root and not just one.

First, set up your environment ObservableObject and for readability, use an enum to type your views.

class ActiveView : ObservableObject {
  @Published var selection: AppView? = nil
}

enum AppView : Comparable {
  case Main, Screen_11, Screen_12, Screen_21, Screen_22
}

[...]
let activeView = ActiveView()
window.rootViewController = UIHostingController(rootView: contentView.environmentObject(activeView))

In your main ContentView, use buttons with NavigationLink on EmptyView(). We do that to use the isActive parameter of NavigationLink instead of the tag and selection. Screen_11 on main view needs to remain active on Screen_12, and conversely, Screen_21 needs to remain active with Screen_22 or otherwise the views will pop out. Don't forget to set your isDetailLink to false.

struct ContentView: View {
  @EnvironmentObject private var activeView: ActiveView

  var body: some View {
    NavigationView {
      VStack {

        // These buttons navigate by setting the environment variable.
        Button(action: { self.activeView.selection = AppView.Screen_1.1}) {
            Text("Navigate to Screen 1.1")
        }

        Button(action: { self.activeView.selection = AppView.Screen_2.1}) {
            Text("Navigate to Screen 2.1")
        }

       // These are the navigation link bound to empty views so invisible
        NavigationLink(
          destination: Screen_11(),
          isActive: orBinding(b: self.$activeView.selection, value1: AppView.Screen_11, value2: AppView.Screen_12)) {
            EmptyView()
        }.isDetailLink(false)

        NavigationLink(
          destination: Screen_21(),
          isActive: orBinding(b: self.$activeView.selection, value1: AppView.Screen_21, value2: AppView.Screen_22)) {
            EmptyView()
        }.isDetailLink(false)
      }
    }
  }

You can use the same pattern on Screen_11 to navigate to Screen_12.

Now, the breakthrough for that complex navigation is the orBinding. It allows the stack of views on a navigation flow to remain active. Whether you are on Screen_11 or Screen_12, you need the NavigationLink(Screen_11) to remain active.

// This function create a new Binding<Bool> compatible with NavigationLink.isActive
func orBinding<T:Comparable>(b: Binding<T?>, value1: T, value2: T) -> Binding<Bool> {
  return Binding<Bool>(
      get: {
          return (b.wrappedValue == value1) || (b.wrappedValue == value2)
      },
      set: { newValue in  } // Don't care the set
    )
}

Upvotes: 1

squarehippo10
squarehippo10

Reputation: 1945

This solution is based on malhal's answer, uses suggestions from Imthath and Florin Odagiu, and required Paul Hudson's NavigationView video to bring it all together for me.

The idea is very simple. The isActive parameter of a navigationLink is set to true when tapped. That allows a second view to appear. You can use additional links to add more views. To go back to the root, just set isActive to false. The second view, plus any others that may have stacked up, disappear.

import SwiftUI

class Views: ObservableObject {
    @Published var stacked = false
}

struct ContentView: View {
    @ObservedObject var views = Views()

    var body: some View {
        NavigationView {
            NavigationLink(destination: ContentView2(), isActive: self.$views.stacked) {
                Text("Go to View 2") // Tapping this link sets stacked to true
            }
            .isDetailLink(false)
            .navigationBarTitle("ContentView")
        }
        .environmentObject(views) // Inject a new views instance into the navigation view environment so that it's available to all views presented by the navigation view.
    }
}

struct ContentView2: View {

    var body: some View {
        NavigationLink(destination: ContentView3()) {
            Text("Go to View 3")
        }
        .isDetailLink(false)
        .navigationBarTitle("View 2")
    }
}

struct ContentView3: View {
    @EnvironmentObject var views: Views

    var body: some View {

        Button("Pop to root") {
            self.views.stacked = false // By setting this to false, the second view that was active is no more. Which means, the content view is being shown once again.
        }
        .navigationBarTitle("View 3")
    }
}

Upvotes: 5

Super Noob
Super Noob

Reputation: 870

Introducing Apple's solution to this very problem

It also presented to you via HackingWithSwift (which I stole this from, LOL) under programmatic navigation:

(Tested on Xcode 12 and iOS 14)

Essentially, you use tag and selection inside navigationlink to go straight to whatever page you want.

struct ContentView: View {
    @State private var selection: String? = nil

    var body: some View {
        NavigationView {
            VStack {
                NavigationLink(destination: Text("Second View"), tag: "Second", selection: $selection) { EmptyView() }
                NavigationLink(destination: Text("Third View"), tag: "Third", selection: $selection) { EmptyView() }
                Button("Tap to show second") {
                    self.selection = "Second"
                }
                Button("Tap to show third") {
                    self.selection = "Third"
                }
            }
            .navigationBarTitle("Navigation")
        }
    }
}

You can use an @environmentobject injected into ContentView() to handle the selection:

class NavigationHelper: ObservableObject {
    @Published var selection: String? = nil
}

inject into App:

@main
struct YourApp: App {
    var body: some Scene {
        WindowGroup {
            ContentView().environmentObject(NavigationHelper())
        }
    }
}

and use it:

struct ContentView: View {
    @EnvironmentObject var navigationHelper: NavigationHelper

    var body: some View {
        NavigationView {
            VStack {
                NavigationLink(destination: Text("Second View"), tag: "Second", selection: $navigationHelper.selection) { EmptyView() }
                NavigationLink(destination: Text("Third View"), tag: "Third", selection: $navigationHelper.selection) { EmptyView() }
                Button("Tap to show second") {
                    self.navigationHelper.selection = "Second"
                }
                Button("Tap to show third") {
                    self.navigationHelper.selection = "Third"
                }
            }
            .navigationBarTitle("Navigation")
        }
    }
}

To go back to contentview in child navigationlinks, you just set the navigationHelper.selection = nil.

Note you don't even have to use tag and selection for subsequent child nav links if you don't want to—they will not have functionality to go to that specific navigationLink though.

Upvotes: 27

Chuck H
Chuck H

Reputation: 8266

Definitely, malhal has the key to the solution, but for me, it is not practical to pass the Binding's into the View's as parameters. The environment is a much better way as pointed out by Imthath.

Here is another approach that is modeled after Apple's published dismiss() method to pop to the previous View.

Define an extension to the environment:

struct RootPresentationModeKey: EnvironmentKey {
    static let defaultValue: Binding<RootPresentationMode> = .constant(RootPresentationMode())
}

extension EnvironmentValues {
    var rootPresentationMode: Binding<RootPresentationMode> {
        get { return self[RootPresentationModeKey.self] }
        set { self[RootPresentationModeKey.self] = newValue }
    }
}

typealias RootPresentationMode = Bool

extension RootPresentationMode {
    
    public mutating func dismiss() {
        self.toggle()
    }
}

USAGE:

  1. Add .environment(\.rootPresentationMode, self.$isPresented) to the root NavigationView, where isPresented is Bool used to present the first child view.

  2. Either add .navigationViewStyle(StackNavigationViewStyle()) modifier to the root NavigationView, or add .isDetailLink(false) to the NavigationLink for the first child view.

  3. Add @Environment(\.rootPresentationMode) private var rootPresentationMode to any child view from where pop to root should be performed.

  4. Finally, invoking the self.rootPresentationMode.wrappedValue.dismiss() from that child view will pop to the root view.

I have published a complete working example on GitHub.

Upvotes: 59

Mahmud Ahsan
Mahmud Ahsan

Reputation: 2025

Thanks to Malhal's @Binding solution, I learned I was missing the .isDetailLink(false) modifier.

In my case, I don't want to use the @Binding at every subsequent view.

This is my solution where I am using EnvironmentObject.

Step 1: Create an AppState ObservableObject

import SwiftUI
import Combine

class AppState: ObservableObject {
    @Published var moveToDashboard: Bool = false
}

Step 2: Create instance of AppState and add in contentView in SceneDelegate

func scene(_ scene: UIScene, willConnectTo session: UISceneSession, options connectionOptions: UIScene.ConnectionOptions) {
    // Create the SwiftUI view that provides the window contents.
    let contentView = ContentView()
    let appState = AppState()

    // Use a UIHostingController as window root view controller.
    if let windowScene = scene as? UIWindowScene {
        let window = UIWindow(windowScene: windowScene)
        window.rootViewController = UIHostingController(rootView:
            contentView
                .environmentObject(appState)
        )
        self.window = window
        window.makeKeyAndVisible()
    }
}

Step 3: Code of ContentView.swift

I am updating the appState value of the last view in the Stack which using .onReceive() I am capturing in the contentView to update the isActive to false for the NavigationLink.

The key here is to use .isDetailLink(false) with the NavigationLink. Otherwise, it will not work.

import SwiftUI
import Combine

class AppState: ObservableObject {
    @Published var moveToDashboard: Bool = false
}

struct ContentView: View {
    @EnvironmentObject var appState: AppState
    @State var isView1Active: Bool = false

    var body: some View {
        NavigationView {
            VStack {
                Text("Content View")
                    .font(.headline)

                NavigationLink(destination: View1(), isActive: $isView1Active) {
                    Text("View 1")
                        .font(.headline)
                }
                .isDetailLink(false)
            }
            .onReceive(self.appState.$moveToDashboard) { moveToDashboard in
                if moveToDashboard {
                    print("Move to dashboard: \(moveToDashboard)")
                    self.isView1Active = false
                    self.appState.moveToDashboard = false
                }
            }
        }
    }
}

// MARK:- View 1
struct View1: View {

    var body: some View {
        VStack {
            Text("View 1")
                .font(.headline)
            NavigationLink(destination: View2()) {
                Text("View 2")
                    .font(.headline)
            }
        }
    }
}

// MARK:- View 2
struct View2: View {
    @EnvironmentObject var appState: AppState

    var body: some View {
        VStack {
            Text("View 2")
                .font(.headline)
            Button(action: {
                self.appState.moveToDashboard = true
            }) {
                Text("Move to Dashboard")
                .font(.headline)
            }
        }
    }
}


struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}

Enter image description here

Upvotes: 4

superpuccio
superpuccio

Reputation: 12972

I recently created an open source project called swiftui-navigation-stack. It's an alternative navigation stack for SwiftUI. Take a look at the README for all the details; it's really easy to use.

First of all, if you want to navigate between screens (i.e., fullscreen views) define your own simple Screen view:

struct Screen<Content>: View where Content: View {
    let myAppBackgroundColour = Color.white
    let content: () -> Content

    var body: some View {
        ZStack {
            myAppBackgroundColour.edgesIgnoringSafeArea(.all)
            content()
        }
    }
}

Then embed your root in a NavigationStackView (as you'd do with the standard NavigationView):

struct RootView: View {
    var body: some View {
        NavigationStackView {
            Homepage()
        }
    }
}

Now let's create a couple of child views just to show you the basic behaviour:

struct Homepage: View {
    var body: some View {
        Screen {
            PushView(destination: FirstChild()) {
                Text("PUSH FORWARD")
            }
        }
    }
}

struct FirstChild: View {
    var body: some View {
        Screen {
            VStack {
                PopView {
                    Text("JUST POP")
                }
                PushView(destination: SecondChild()) {
                    Text("PUSH FORWARD")
                }
            }
        }
    }
}

struct SecondChild: View {
    var body: some View {
        Screen {
            VStack {
                PopView {
                    Text("JUST POP")
                }
                PopView(destination: .root) {
                    Text("POP TO ROOT")
                }
            }
        }
    }
}

You can exploit PushView and PopView to navigate back and forth. Of course, your content view inside the SceneDelegate must be:

// Create the SwiftUI view that provides the window contents.
let contentView = RootView()

The result is:

Enter image description here

Upvotes: 1

Michael Henry
Michael Henry

Reputation: 722

For me, in order to achieve full control for the navigation that is still missing in SwiftUI, I just embedded the SwiftUI View inside a UINavigationController. inside the SceneDelegate. Take note that I hide the navigation bar in order to use the NavigationView as my display.

class SceneDelegate: UIResponder, UIWindowSceneDelegate {

    var window: UIWindow?

    func scene(_ scene: UIScene, willConnectTo session: UISceneSession, options connectionOptions: UIScene.ConnectionOptions) {

        UINavigationBar.appearance().tintColor = .black

        let contentView = OnBoardingView()
        if let windowScene = scene as? UIWindowScene {
            let window = UIWindow(windowScene: windowScene)
            let hostingVC = UIHostingController(rootView: contentView)
            let mainNavVC = UINavigationController(rootViewController: hostingVC)
            mainNavVC.navigationBar.isHidden = true
            window.rootViewController = mainNavVC
            self.window = window
            window.makeKeyAndVisible()
        }
    }
}

And then I have created this Protocol and Extension, HasRootNavigationController

import SwiftUI
import UIKit

protocol HasRootNavigationController {
    var rootVC:UINavigationController? { get }

    func push<Content:View>(view: Content, animated:Bool)
    func setRootNavigation<Content:View>(views:[Content], animated:Bool)
    func pop(animated: Bool)
    func popToRoot(animated: Bool)
}

extension HasRootNavigationController where Self:View {

    var rootVC:UINavigationController? {
        guard let scene = UIApplication.shared.connectedScenes.first,
            let sceneDelegate = scene as? UIWindowScene,
            let rootvc = sceneDelegate.windows.first?.rootViewController
                as? UINavigationController else { return nil }
        return rootvc
    }

    func push<Content:View>(view: Content, animated:Bool = true) {
        rootVC?.pushViewController(UIHostingController(rootView: view), animated: animated)
    }

    func setRootNavigation<Content:View>(views: [Content], animated:Bool = true) {
        let controllers =  views.compactMap { UIHostingController(rootView: $0) }
        rootVC?.setViewControllers(controllers, animated: animated)
    }

    func pop(animated:Bool = true) {
        rootVC?.popViewController(animated: animated)
    }

    func popToRoot(animated: Bool = true) {
        rootVC?.popToRootViewController(animated: animated)
    }
}

After that, on my SwiftUI View, I used/implemented the HasRootNavigationController protocol and extension

extension YouSwiftUIView:HasRootNavigationController {

    func switchToMainScreen() {
        self.setRootNavigation(views: [MainView()])
    }

    func pushToMainScreen() {
         self.push(view: [MainView()])
    }

    func goBack() {
         self.pop()
    }

    func showTheInitialView() {
         self.popToRoot()
    }
}

Here is the gist of my code in case I have some updates. https://gist.github.com/michaelhenry/945fc63da49e960953b72bbc567458e6

Upvotes: 4

jpelayo
jpelayo

Reputation: 413

Here is my slow, animated, a bit rough backwards pop solution using onAppear, valid for Xcode 11 and iOS 13.1:

import SwiftUI
import Combine


struct NestedViewLevel3: View {
    @Binding var resetView:Bool
    @Environment(\.presentationMode) var presentationMode: Binding<PresentationMode>

    var body: some View {
        VStack {
            Spacer()
            Text("Level 3")
            Spacer()
            Button(action: {
                self.presentationMode.wrappedValue.dismiss()
            }) {
                Text("Back")
                    .padding(.horizontal, 15)
                    .padding(.vertical, 2)
                    .foregroundColor(Color.white)
                    .clipped(antialiased: true)
                    .background(
                        RoundedRectangle(cornerRadius: 20)
                            .foregroundColor(Color.blue)
                            .frame(minWidth: 0, maxWidth: .infinity, minHeight: 0, maxHeight: 40, alignment: .center)
                )}
            Spacer()
            Button(action: {
                self.$resetView.wrappedValue = true
                self.presentationMode.wrappedValue.dismiss()
            }) {
                Text("Reset")
                    .padding(.horizontal, 15)
                    .padding(.vertical, 2)
                    .foregroundColor(Color.white)
                    .clipped(antialiased: true)
                    .background(
                        RoundedRectangle(cornerRadius: 20)
                            .foregroundColor(Color.blue)
                            .frame(minWidth: 0, maxWidth: .infinity, minHeight: 0, maxHeight: 40, alignment: .center)
                )}
            Spacer()
        }
        .navigationBarBackButtonHidden(false)
        .navigationBarTitle("Level 3", displayMode: .inline)
        .onAppear(perform: {print("onAppear level 3")})
        .onDisappear(perform: {print("onDisappear level 3")})
    }
}

struct NestedViewLevel2: View {
    @Binding var resetView:Bool
    @Environment(\.presentationMode) var presentationMode: Binding<PresentationMode>

    var body: some View {
        VStack {
            Spacer()
            NavigationLink(destination: NestedViewLevel3(resetView:$resetView)) {
                Text("To level 3")
                    .padding(.horizontal, 15)
                    .padding(.vertical, 2)
                    .foregroundColor(Color.white)
                    .clipped(antialiased: true)
                    .background(
                        RoundedRectangle(cornerRadius: 20)
                            .foregroundColor(Color.gray)
                            .frame(minWidth: 0, maxWidth: .infinity, minHeight: 0, maxHeight: 40, alignment: .center)
                )
                    .shadow(radius: 10)
            }
            Spacer()
            Text("Level 2")
            Spacer()
            Button(action: {
                self.presentationMode.wrappedValue.dismiss()
            }) {
                Text("Back")
                    .padding(.horizontal, 15)
                    .padding(.vertical, 2)
                    .foregroundColor(Color.white)
                    .clipped(antialiased: true)
                    .background(
                        RoundedRectangle(cornerRadius: 20)
                            .foregroundColor(Color.blue)
                            .frame(minWidth: 0, maxWidth: .infinity, minHeight: 0, maxHeight: 40, alignment: .center)
                )}
            Spacer()
        }
        .navigationBarBackButtonHidden(false)
        .navigationBarTitle("Level 2", displayMode: .inline)
        .onAppear(perform: {
            print("onAppear level 2")
            if self.$resetView.wrappedValue {
                self.presentationMode.wrappedValue.dismiss()
            }
        })
        .onDisappear(perform: {print("onDisappear level 2")})
    }
}

struct NestedViewLevel1: View {
    @Binding var resetView:Bool
    @Environment(\.presentationMode) var presentationMode: Binding<PresentationMode>

    var body: some View {
        VStack {
            Spacer()
            NavigationLink(destination: NestedViewLevel2(resetView:$resetView)) {
                Text("To level 2")
                    .padding(.horizontal, 15)
                    .padding(.vertical, 2)
                    .foregroundColor(Color.white)
                    .clipped(antialiased: true)
                    .background(
                        RoundedRectangle(cornerRadius: 20)
                            .foregroundColor(Color.gray)
                            .frame(minWidth: 0, maxWidth: .infinity, minHeight: 0, maxHeight: 40, alignment: .center)
                )
                    .shadow(radius: 10)
            }
            Spacer()
            Text("Level 1")
            Spacer()
            Button(action: {
                self.presentationMode.wrappedValue.dismiss()
            }) {
                Text("Back")
                    .padding(.horizontal, 15)
                    .padding(.vertical, 2)
                    .foregroundColor(Color.white)
                    .clipped(antialiased: true)
                    .background(
                        RoundedRectangle(cornerRadius: 20)
                            .foregroundColor(Color.blue)
                            .frame(minWidth: 0, maxWidth: .infinity, minHeight: 0, maxHeight: 40, alignment: .center)
            )}
            Spacer()
        }
        .navigationBarBackButtonHidden(false)
        .navigationBarTitle("Level 1", displayMode: .inline)
        .onAppear(perform: {
            print("onAppear level 1")
            if self.$resetView.wrappedValue {
                self.presentationMode.wrappedValue.dismiss()
            }
        })
        .onDisappear(perform: {print("onDisappear level 1")})
    }
}

struct RootViewLevel0: View {
    @Binding var resetView:Bool
    var body: some View {
        NavigationView {
            VStack {
                Spacer()
                NavigationLink(destination: NestedViewLevel1(resetView:$resetView)) {
                Text("To level 1")
                    .padding(.horizontal, 15)
                    .padding(.vertical, 2)
                    .foregroundColor(Color.white)
                    .clipped(antialiased: true)
                    .background(
                        RoundedRectangle(cornerRadius: 20)
                        .foregroundColor(Color.gray)
                        .frame(minWidth: 0, maxWidth: .infinity, minHeight: 0, maxHeight: 40, alignment: .center)
                    )
                    .shadow(radius: 10)
                }
                //.disabled(false)
                //.hidden()
                Spacer()
            }
        }
        //.frame(width:UIScreen.main.bounds.width,height:  UIScreen.main.bounds.height - 110)
        .navigationBarTitle("Root level 0", displayMode: .inline)
        .navigationBarBackButtonHidden(false)
        .navigationViewStyle(StackNavigationViewStyle())
        .onAppear(perform: {
            print("onAppear root level 0")
            self.resetNavView()
        })
        .onDisappear(perform: {print("onDisappear root level 0")})
    }

    func resetNavView(){
        print("resetting objects")
        self.$resetView.wrappedValue = false
    }

}


struct ContentView: View {
    @State var resetView = false
    var body: some View {
        RootViewLevel0(resetView:$resetView)
    }
}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}

Upvotes: 3

kprater
kprater

Reputation: 623

I figured out how to use complex navigation in SwiftUI. The trick is to collect all the states of your views, which tell if they are shown.

Start by defining a NavigationController. I have added the selection for the tabview tab and the Boolean values saying if a specific view is shown:

import SwiftUI

final class NavigationController: ObservableObject  {

  @Published var selection: Int = 1

  @Published var tab1Detail1IsShown = false
  @Published var tab1Detail2IsShown = false

  @Published var tab2Detail1IsShown = false
  @Published var tab2Detail2IsShown = false
}

Setting up the tabview with two tabs and binding our NavigationController.selection to the tabview:

import SwiftUI

struct ContentView: View {

  @EnvironmentObject var nav: NavigationController

  var body: some View {

    TabView(selection: self.$nav.selection) {

      FirstMasterView()
      .tabItem {
        Text("First")
      }
      .tag(0)

      SecondMasterView()
      .tabItem {
        Text("Second")
      }
      .tag(1)
    }
  }

}

As an example, this is one navigationStacks

import SwiftUI

struct FirstMasterView: View {

  @EnvironmentObject var nav: NavigationController

  var body: some View {
    NavigationView {
      VStack {

        NavigationLink(destination: FirstDetailView(), isActive: self.$nav.tab1Detail1IsShown) {
          Text("go to first detail")
        }
      } .navigationBarTitle(Text("First MasterView"))
    }
  }
}

struct FirstDetailView: View {

  @EnvironmentObject var nav: NavigationController
  @Environment(\.presentationMode) var presentationMode: Binding<PresentationMode>

  var body: some View {

    VStack(spacing: 20) {
      Text("first detail View").font(.title)

      NavigationLink(destination: FirstTabLastView(), isActive: self.$nav.tab1Detail2IsShown) {
        Text("go to last detail on nav stack")
      }

      Button(action: {
        self.nav.tab2Detail1IsShown = false // true will go directly to detail
        self.nav.tab2Detail2IsShown = false

        self.nav.selection = 1
      }) {
        Text("Go to second tab")
      }
    }

    // In case of collapsing all the way back
    // there is a bug with the environment object
    // to go all the way back I have to use the presentationMode
    .onReceive(self.nav.$tab1Detail2IsShown, perform: { (out) in
      if out ==  false {
        self.presentationMode.wrappedValue.dismiss()
      }
    })
  }
}

struct FirstTabLastView: View {
  @EnvironmentObject var nav: NavigationController

  var body: some View {
    Button(action: {
      self.nav.tab1Detail1IsShown = false
      self.nav.tab1Detail2IsShown = false
    }) {
      Text("Done and go back to beginning of navigation stack")
    }
  }
}

This approach is quite SwiftUI-state oriented.

Upvotes: 6

Fabrice Leyne
Fabrice Leyne

Reputation: 799

As far as I can see, there isn't any easy way to do it with the current beta 5. The only way I found is very hacky, but it works.

Basically, add a publisher to your DetailViewA which will be triggered from DetailViewB. In DetailViewB dismiss the view and inform the publisher, which itself will close DetailViewA.

    struct DetailViewB: View {
    @Environment(\.presentationMode) var presentationMode: Binding<PresentationMode>
    var publisher = PassthroughSubject<Void, Never>()

    var body: some View {
        VStack {
            Text("This is Detail View B.")

            Button(action: { self.presentationMode.value.dismiss() } )
            { Text("Pop to Detail View A.") }

            Button(action: {
                DispatchQueue.main.async {
                self.presentationMode.wrappedValue.dismiss()
                self.publisher.send()
                }
            } )
            { Text("Pop two levels to Master View.") }

        }
    }
}

struct DetailViewA: View {
    @Environment(\.presentationMode) var presentationMode: Binding<PresentationMode>
    var publisher = PassthroughSubject<Void, Never>()

    var body: some View {
        VStack {
            Text("This is Detail View A.")

            NavigationLink(destination: DetailViewB(publisher:self.publisher) )
            { Text("Push to Detail View B.") }

            Button(action: { self.presentationMode.value.dismiss() } )
            { Text("Pop one level to Master.") }
        }
        .onReceive(publisher, perform: { _ in
            DispatchQueue.main.async {
                print("Go Back to Master")
                self.presentationMode.wrappedValue.dismiss()
            }
        })
    }
}

And Beta 6 still doesn't have a solution.

I found another way to go back to the root, but this time I'm losing the animation, and go straight to the root. The idea is to force a refresh of the root view, this way leading to a cleaning of the navigation stack.

But ultimately only Apple could bring a proper solution, as the management of the navigation stack is not available in SwiftUI.

NB: The simple solution by notification below works on iOS, not watchOS, as watchOS clears the root view from memory after two navigation levels. But having an external class managing the state for watchOS should just work.

struct DetailViewB: View {
    @Environment(\.presentationMode) var presentationMode: Binding<PresentationMode>

    @State var fullDissmiss:Bool = false
    var body: some View {
        SGNavigationChildsView(fullDissmiss: self.fullDissmiss){
            VStack {
                Text("This is Detail View B.")

                Button(action: { self.presentationMode.wrappedValue.dismiss() } )
                { Text("Pop to Detail View A.") }

                Button(action: {
                    self.fullDissmiss = true
                } )
                { Text("Pop two levels to Master View with SGGoToRoot.") }
            }
        }
    }
}

struct DetailViewA: View {
    @Environment(\.presentationMode) var presentationMode: Binding<PresentationMode>

    @State var fullDissmiss:Bool = false
    var body: some View {
        SGNavigationChildsView(fullDissmiss: self.fullDissmiss){
            VStack {
                Text("This is Detail View A.")

                NavigationLink(destination: DetailViewB() )
                { Text("Push to Detail View B.") }

                Button(action: { self.presentationMode.wrappedValue.dismiss() } )
                { Text("Pop one level to Master.") }

                Button(action: { self.fullDissmiss = true } )
                { Text("Pop one level to Master with SGGoToRoot.") }
            }
        }
    }
}

struct MasterView: View {
    var body: some View {
        VStack {
            Text("This is Master View.")
            NavigationLink(destination: DetailViewA() )
            { Text("Push to Detail View A.") }
        }
    }
}

struct ContentView: View {

    var body: some View {
        SGRootNavigationView{
            MasterView()
        }
    }
}
#if DEBUG
struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}
#endif

struct SGRootNavigationView<Content>: View where Content: View {
    let cancellable = NotificationCenter.default.publisher(for: Notification.Name("SGGoToRoot"), object: nil)

    let content: () -> Content

    init(@ViewBuilder content: @escaping () -> Content) {
        self.content = content
    }

    @State var goToRoot:Bool = false

    var body: some View {
        return
            Group{
            if goToRoot == false{
                NavigationView {
                content()
                }
            }else{
                NavigationView {
                content()
                }
            }
            }.onReceive(cancellable, perform: {_ in
                DispatchQueue.main.async {
                    self.goToRoot.toggle()
                }
            })
    }
}

struct SGNavigationChildsView<Content>: View where Content: View {
    let notification = Notification(name: Notification.Name("SGGoToRoot"))

    var fullDissmiss:Bool{
        get{ return false }
        set{ if newValue {self.goToRoot()} }
    }

    let content: () -> Content

    init(fullDissmiss:Bool, @ViewBuilder content: @escaping () -> Content) {
        self.content = content
        self.fullDissmiss = fullDissmiss
    }

    var body: some View {
        return Group{
            content()
        }
    }

    func goToRoot(){
        NotificationCenter.default.post(self.notification)
    }
}

Upvotes: 11

Victor Kushnerov
Victor Kushnerov

Reputation: 3964

To go to Root View without using .isDetailLink(false) you need to remove NavigationLink from hierarchy view of Root View

class NavigationLinkStore: ObservableObject {
    static let shared = NavigationLinkStore()

    @Published var showLink = false
}

struct NavigationLinkView: View {
    @ObservedObject var store = NavigationLinkStore.shared
    @State var isActive = false

    var body: some View {
        NavigationView {
            VStack {
                Text("Main")

                Button("Go to View1") {
                    Task {
                        store.showLink = true
                        try await Task.sleep(seconds: 0.1)
                        isActive = true
                    }
                }

                if store.showLink {
                    NavigationLink(
                        isActive: $isActive,
                        destination: { NavigationLink1View() },
                        label: { EmptyView() }
                    )
                }
            }
        }
    }
}

struct NavigationLink1View: View {
    var body: some View {
        VStack {
            Text("View1")
            NavigationLink("Go to View 2", destination: NavigationLink2View())
        }
    }
}

struct NavigationLink2View: View {
    @ObservedObject var store = NavigationLinkStore.shared

    var body: some View {
        VStack {
            Text("View2")
            Button("Go to root") {
                store.showLink = false
            }
        }
    }
}

Upvotes: 0

Related Questions