SwiftUI NavigationStack

SwiftUI has revolutionized the way user interfaces are built in iOS and macOS applications. With SwiftUI, building navigation flows is more intuitive and efficient than ever. One of the key components that makes this possible is NavigationStack. In this blog post, we’ll delve deeper into SwiftUI’s navigation stack, explore its features, and provide practical examples to help you master navigation in your SwiftUI apps.

What is a NavigationStack in SwiftUI?

In SwiftUI, the NavigationStack is a container that manages a hierarchical navigation view. It is responsible for managing the stack of views, allowing users to navigate through different screens or views within your app. NavigationView is commonly used to host the NavigationStack and provide the NavigationBar to control the navigation flow.

Basic Usage of NavigationStack:

Here’s a basic example of how to use a NavigationStack in SwiftUI:

import SwiftUI

struct ContentView: View {
    var body: some View {
        NavigationView {
            NavigationLink("Go to Details", destination: DetailView())
                .navigationBarTitle("Home")
        }
    }
}

struct DetailView: View {
    var body: some View {
        Text("This is the Detail View")
            .navigationBarTitle("Detail")
    }
}

In this example, we create a simple NavigationView that contains a navigation link. When the “Go to Details” link is tapped, it pushes the DetailView onto the navigation stack, and a back button appears in the navigation bar to return to the previous view.

NavigationStack Features:

1. NavigationLink:

NavigationLink is used to navigate from one view to another. It’s a crucial component of the NavigationStack. Here’s an example of how to use it:

NavigationLink("Go to Details", destination: DetailView())

2. Presentation:

You can customize how views are presented on the stack, such as sheet presentations or modals. For instance:

.sheet(isPresented: $isSheetPresented) {
    Text("This is a sheet view.")
}

3. Navigation Bar Customization:

You can customize the navigation bar appearance and behavior for each view in the stack, such as titles, buttons, and navigation bar items.

.navigationBarTitle("Detail", displayMode: .inline)
.navigationBarItems(trailing: Button("Save") {
    // Handle save action
})

NavigationStack in Complex Apps:

In more complex apps, you might need to manage a more extensive navigation stack. SwiftUI allows you to use NavigationLink and NavigationLinkDestination to control navigation programmatically.

@State private var isActive: Bool = false

NavigationLink(destination: DetailView(), isActive: $isActive) {
    EmptyView()
}

SwiftUI’s NavigationStack is a powerful tool for managing navigation in your iOS and macOS apps. With its intuitive API and a wide range of customization options, you can create smooth and user-friendly navigation experiences. By understanding the basics and exploring advanced features, you’ll be well equipped to build sophisticated SwiftUI apps with seamless navigation flow.

NAVIGATION STACK

Navigation Stack is a library with stack-modeled UI navigation controller.

Requirements

iOS 9.0+
Xcode 9

Installation

Just add the Source folder to your project.

or use CocoaPods with Podfile:

pod 'Navigation-stack'

or Carthage users can simply add to their Cartfile:

github "Ramotion/navigation-stack"

Usage

YourNavigationController inherit from NavigationStack
add code to root viewViewController

override func viewDidLoad() {
    super.viewDidLoad()
    navigationController!.interactivePopGestureRecognizer?.delegate = self
  }

extension YourViewController: UIGestureRecognizerDelegate {
  func gestureRecognizerShouldBegin(gestureRecognizer: UIGestureRecognizer) -> Bool {

    if navigationController?.viewControllers.count == 2 {
      return true
    }

    if let navigationController = self.navigationController as? NavigationStack {
      navigationController.showControllers()
    }

    return false
  }
}