Navigation and Tab Views in SwiftUI

# CHAPTER 13

Navigation and Tab Views in SwiftUI #

1. Introduction #

2. Learning Objectives #

• Implement a NavigationStack at the root of your application.

• Transition between screens using NavigationLink.

• Pass data from a Parent screen to a Child screen during navigation.

• Add large and inline navigation titles to your screens.

• Build a persistent bottom navigation bar using TabView.

3. The NavigationStack #

import SwiftUI

struct HomeView: View {
    var body: some View {
        // Wrapping everything in a NavigationStack!
        NavigationStack {
            VStack {
                Text("Welcome Home")
            }
            .navigationTitle("Home") // This adds the big Apple header at the top!
        }
    }
}

4. Transitioning with NavigationLink #

import SwiftUI

// The Destination Screen
struct DetailView: View {
    var body: some View {
        Text("You made it to the detail screen!")
            .navigationTitle("Details")
            // NavigationStack automatically gives us a "< Back" button!
    }
}

// The Home Screen
struct HomeView: View {
    var body: some View {
        NavigationStack {
            VStack {
                // The Button that triggers the transition!
                NavigationLink(destination: DetailView()) {
                    Text("Go to Details")
                        .foregroundColor(.white)
                        .padding()
                        .background(Color.blue)
                        .cornerRadius(10)
                }
            }
            .navigationTitle("Home")
        }
    }
}

5. Passing Data Between Screens #

// 1. The Child Screen REQUIRES a String to be initialized
struct ProductDetailView: View {
    let productName: String 
    
    var body: some View {
        Text("Details for: \(productName)")
            .navigationTitle(productName)
    }
}

// 2. The Parent Screen passes the data in the NavigationLink!
struct StoreView: View {
    var body: some View {
        NavigationStack {
            VStack {
                NavigationLink(destination: ProductDetailView(productName: "iPhone 15")) {
                    Text("Buy iPhone")
                }
                
                NavigationLink(destination: ProductDetailView(productName: "MacBook Pro")) {
                    Text("Buy MacBook")
                }
            }
            .navigationTitle("Apple Store")
        }
    }
}

6. TabView (Bottom Navigation) #

import SwiftUI

struct MainAppView: View {
    var body: some View {
        TabView {
            // Tab 1
            HomeView()
                .tabItem {
                    Label("Home", systemImage: "house.fill")
                }
            
            // Tab 2
            Text("Search Screen")
                .tabItem {
                    Label("Search", systemImage: "magnifyingglass")
                }
            
            // Tab 3
            ProfileCardView() // Reusing the view from Chapter 12!
                .tabItem {
                    Label("Profile", systemImage: "person.fill")
                }
        }
        .accentColor(.purple) // Colors the currently active tab icon purple!
    }
}

7. Common Mistakes #

• Nesting NavigationStacks: A massive architectural mistake beginners make is putting a NavigationStack inside HomeView, and then putting *another* NavigationStack inside DetailView. This will cause the top navigation bars to double up, glitch out, and eventually crash the app. You only need ONE NavigationStack at the very root of your app. All child screens inherit it automatically!

8. Best Practices #

• Combining TabView and NavigationStack: If you use a TabView, where does the NavigationStack go? The rule is: The TabView is the root, and *each individual tab* gets its own NavigationStack!

1. 1. Create a NavigationStack with a navigationTitle of "Settings".

1. 2. Inside it, create a NavigationLink that transitions to a simple Text("Privacy Settings") view.

• Q: Explain the mechanical difference between a NavigationStack and a NavigationLink. Which one manages the memory array of the screen hierarchy?

• Q: Describe the catastrophic UI behavior that occurs when a developer accidentally nests a NavigationStack inside of another NavigationStack.

• Q: When architecting an application that utilizes both bottom-bar tabs and sliding screen navigation, detail the hierarchical relationship between the TabView and the NavigationStacks.

15. Next Chapter Recommendation #