Navigation path management in iOS Swift - Mini App: Build & Ship

Build: Simple Navigation Flow

This screen demonstrates managing navigation paths using a NavigationStack. The user can navigate forward to a detail screen and go back using the navigation bar.

Target UI

Main Screen
+---------------------+
| Simple Navigation    |
|                     |
| [Go to Detail]       |
+---------------------+

Detail Screen
+---------------------+
| Detail View         |
|                     |
| [Back] (nav bar)    |
+---------------------+

Use NavigationStack to manage navigation path

Main screen with a button labeled 'Go to Detail'

Tapping the button pushes a DetailView onto the stack

DetailView shows a text 'Detail View' and a back button in the navigation bar

Back button returns to the main screen

Starter Code

iOS Swift

import SwiftUI

struct ContentView: View {
    var body: some View {
        NavigationStack {
            VStack {
                // TODO: Add navigation button here
            }
            .navigationTitle("Simple Navigation")
        }
    }
}

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

Task 1

Task 2

Solution

iOS Swift

import SwiftUI

struct ContentView: View {
    var body: some View {
        NavigationStack {
            VStack {
                NavigationLink("Go to Detail", destination: DetailView())
                    .padding()
            }
            .navigationTitle("Simple Navigation")
        }
    }
}

struct DetailView: View {
    var body: some View {
        Text("Detail View")
            .font(.title)
            .navigationTitle("Detail View")
            .navigationBarTitleDisplayMode(.inline)
    }
}

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

We use NavigationStack to manage the navigation path. The main screen has a NavigationLink labeled "Go to Detail" that pushes DetailView onto the stack when tapped. The DetailView shows a simple text and sets its own navigation title. The back button is automatically provided by NavigationStack in the navigation bar, allowing the user to return to the main screen.

Final Result

Completed Screen

Main Screen
+---------------------+
| Simple Navigation    |
|                     |
| [Go to Detail]       |
+---------------------+

Detail Screen
+---------------------+
| Detail View         |
|                     |
| (Back button in nav bar) |
+---------------------+

Tap 'Go to Detail' button navigates to DetailView screen

Back button in navigation bar returns to Main Screen

Stretch Goal

Add a third screen called 'More Details' that can be navigated to from DetailView with a button labeled 'More Info'.

💡 Hint

Add a NavigationLink inside DetailView that pushes a new MoreDetailsView. Make sure to set navigation titles for all screens.

Practice

1. What does the pushViewController(_:animated:) method do in a UINavigationController?

easy

A. It removes the current screen from the navigation stack.

B. It adds a new screen on top of the current navigation stack.

C. It replaces the entire navigation stack with a new screen.

D. It resets the navigation stack to the root screen.

Solution

1. Step 1: Understand pushViewController behavior

   The method adds a new view controller on top of the current stack, showing a new screen.

2. Step 2: Compare with other navigation actions

   Pop removes the top screen, replace resets stack, so push only adds on top.

3. Final Answer:

   It adds a new screen on top of the current navigation stack. -> Option B

4. Quick Check:

   pushViewController = add new screen [OK]

Hint: Push means add a new screen on top [OK]

Common Mistakes:

• Confusing push with pop (removing screen)
• Thinking push replaces the whole stack
• Assuming push resets to root screen

2. Which of the following is the correct Swift syntax to pop the current view controller from a navigation stack?

easy

A. navigationController.popViewController(animated: true)

B. navigationController.pushViewController(animated: true)

C. navigationController.pop(animated: true)

D. navigationController.removeViewController(animated: true)

Solution

1. Step 1: Recall the correct method name

   The method to remove the top view controller is popViewController(animated:).

2. Step 2: Check method usage

   It is called on the navigationController instance with a Bool for animation.

3. Final Answer:

   navigationController.popViewController(animated: true) -> Option A

4. Quick Check:

   Pop method is popViewController(animated:) [OK]

Hint: Pop removes top screen, method ends with ViewController [OK]

Common Mistakes:

• Using push instead of pop
• Using incorrect method names like pop() or removeViewController()
• Missing the animated parameter

3. Consider this Swift code snippet inside a view controller:

navigationController?.pushViewController(detailVC, animated: true)
navigationController?.popViewController(animated: true)
navigationController?.popViewController(animated: true)

If the navigation stack initially has 3 view controllers, how many view controllers remain after this code runs?

medium

A. 2

B. 1

C. 3

D. 0

Solution

1. Step 1: Analyze push action

   Push adds 1 view controller, so stack goes from 3 to 4.

2. Step 2: Analyze two pop actions

   Each pop removes 1 view controller, so 4 - 2 = 2 remain.

3. Step 3: Confirm final count

   After two pops, 2 view controllers remain on the stack.

4. Final Answer:

   2 -> Option A

5. Quick Check:

   3 + 1 - 2 = 2 [OK]

Hint: Push adds 1, each pop removes 1 [OK]

Common Mistakes:

• Forgetting push adds a controller
• Counting only one pop instead of two
• Assuming stack can't go below 3

4. You wrote this code to pop to the root view controller:

navigationController.popToRootViewController(animated: true)

But your app crashes with an error. What is the most likely cause?

medium

A. animated parameter must be false to avoid crashes.

B. popToRootViewController requires a completion handler parameter.

C. navigationController is nil because the view controller is not inside a navigation stack.

D. You must call popViewController instead of popToRootViewController.

Solution

1. Step 1: Understand navigationController optional

   navigationController is optional and can be nil if the current controller is not inside a navigation stack.

2. Step 2: Check method requirements

   popToRootViewController(animated:) does not require a completion handler and accepts true or false for animation.

3. Final Answer:

   navigationController is nil because the view controller is not inside a navigation stack. -> Option C

4. Quick Check:

   Nil navigationController causes crash [OK]

Hint: Check if navigationController is nil before popping [OK]

Common Mistakes:

• Assuming popToRootViewController needs completion handler
• Thinking animated must be false
• Confusing popViewController with popToRootViewController

5. You want to replace the entire navigation stack with a new set of view controllers: [homeVC, profileVC, settingsVC]. Which code snippet correctly achieves this?

hard

A. navigationController.popViewController(animated: true)

B. navigationController.pushViewController(settingsVC, animated: true)

C. navigationController.popToRootViewController(animated: true)

D. navigationController.setViewControllers([homeVC, profileVC, settingsVC], animated: true)

Solution

1. Step 1: Identify method to replace stack

   The method setViewControllers(_:animated:) replaces the entire navigation stack with the given array.

2. Step 2: Compare other options

   Push adds one controller, popToRoot pops to root only, popViewController pops one controller.

3. Final Answer:

   navigationController.setViewControllers([homeVC, profileVC, settingsVC], animated: true) -> Option D

4. Quick Check:

   setViewControllers replaces stack [OK]

Hint: Use setViewControllers to replace whole stack [OK]

Common Mistakes:

• Using push to add instead of replace
• Using pop methods which only remove controllers
• Forgetting to pass array of controllers