Navigation Stack notes

Author: samuelowino

Notes/Navigation/NavigationStack.md

@@ -0,0 +1,68 @@
+## Introduction to NavigationStack in SwiftUI
+
+SwiftUI's evolution has introduced a shift from traditional `NavigationView` to `NavigationStack`, offering a more flexible and modern approach to navigation. Unlike `NavigationView`, which defines each view individually, `NavigationStack` builds a list of views over a root view. Interaction with a `NavigationLink` adds a view to the top of the stack, with the stack always displaying the most recently added view [1].
+
+### Basic Usage of NavigationStack
+
+To use `NavigationStack`, you start by defining a `NavigationPath` state and then use it within a `NavigationStack` view. Here's a basic example:
+
+```swift
+import SwiftUI
+
+struct ContentView: View {
+ @State private var path = NavigationPath()
+ 
+ var body: some View {
+ NavigationStack(path: $path) {
+ List {
+ NavigationLink("Go to detail A", value: "Show AAAA")
+ NavigationLink("Go to B", value: "Show BBB")
+ NavigationLink("Go to number 1", value: 1)
+ }
+ .navigationDestination(for: String.self) { textValue in
+ Text("Detail View for \(textValue)")
+ }
+ }
+ }
+}
+```
+
+In this example, `NavigationLink`s are used to navigate between different views based on the value passed to them. The `navigationDestination(for:)` modifier specifies what view to display for a given value type [1].
+
+### Value-based Navigation Links
+
+`NavigationStack` introduces a new modifier called `navigationDestination` that associates a destination view with a presented data type. This allows for more dynamic and data-driven navigation. Here's how you can use it:
+
+```swift
+NavigationStack {
+ List(bgColors, id: \.self) { bgColor in
+ NavigationLink(value: bgColor) {
+ Text(bgColor.description)
+ }
+ }
+ .listStyle(.plain)
+ .navigationDestination(for: Color.self) { color in
+ color.frame(maxWidth: .infinity, maxHeight: .infinity)
+ }
+ .navigationTitle("Color")
+}
+```
+
+In this example, `NavigationLink`s are bound to `Color` values, and the `navigationDestination(for: Color.self)` modifier specifies how to display the detail view for a `Color` value [4].
+
+### Handling Multiple Value Types
+
+`NavigationStack` supports handling multiple value types for navigation. This can be achieved by adding multiple `navigationDestination` modifiers for different value types:
+
+```swift
+.navigationDestination(for: String.self) { systemImage in
+ Image(systemName: systemImage)
+ .font(.system(size: 100.0))
+}
+```
+
+This allows for a cleaner and more organized flow, where different types of navigation links can be handled by different `navigationDestination` modifiers [4].
+
+### Conclusion
+
+`NavigationStack` provides a powerful and flexible way to manage navigation in SwiftUI apps. It allows for a more dynamic and data-driven approach to navigation, making it easier to handle complex navigation flows. By understanding how to use `NavigationStack` and its associated modifiers, you can create sophisticated navigation experiences in your SwiftUI apps.